[英]How to loop through htmlcollection object?
I have looked at almost every question that has been asked here about htmlcollection.我已经查看了几乎所有关于 htmlcollection 的问题。
So I have a div and I am fetching data and creating divs inside this div with ajax so they are not hardcoded.所以我有一个 div,我正在使用 ajax 在这个 div 中获取数据并创建 div,因此它们不是硬编码的。
this is how div look like before I fetch the data这是我获取数据之前 div 的样子
<div id="tivvits"></div>
this is how div#tivvits looks like after I call function show_all_tivvits();这就是我调用 function show_all_tivvits(); 之后 div#tivvits 的样子show_all_tivvits() is a function where I create a ajax request and create new divs such as div#tivvit-21, div#tivvit-22, etc.
show_all_tivvits() 是一个 function,我在其中创建一个 ajax 请求并创建新的 div,例如 div#tivvit-21、div#tivvit-22 等。
<div id="tivvits">
<div id="tivvit-19" class="grid-container">...</div>
<div id="tivvit-20" class="grid-container">...</div>
</div>
this is part of the js file这是 js 文件的一部分
document.addEventListener("DOMContentLoaded", function(){
show_all_tivvits();
var t = document.getElementById('tivvits');
const j = t.getElementsByClassName("grid-container");
const k = Array.prototype.slice.call(j)
console.log(k);
for (var i = 0; i < k.length; i++) {
console.log(k[i]);
}
});
what I wanted to do in show_all_tivvits() function is I want to get the divs that are already in the div#tivvits and that way I am not gonna create them again but the problem is when I use console.log()
to print out document.getElementById('tivvits').getElementsByClassName('grid-container')
there are items in the htmlcollection but when I print out length it returns 0.我想在 show_all_tivvits() function 中做的是我想获得已经在 div#tivvits 中的 div,这样我就不会再次创建它们,但问题是当我使用
console.log()
打印出来时document.getElementById('tivvits').getElementsByClassName('grid-container')
htmlcollection 中有项目,但是当我打印出长度时它返回 0。
one more thing when I open inspect>source in chrome my index.php doesn't have updated div#tivvits.当我在 chrome 中打开检查 > 源时,我的 index.php 没有更新 div#tivvits。 I have tried almost every way to loop this htmlcollection but it is not working.
我几乎尝试了所有方法来循环这个 htmlcollection,但它不起作用。
list of things I have tried;我尝试过的事情清单;
Array.from(links)
Array.prototype.slice.call(links)
[].forEach.call(links, function (el) {...});
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
HTMLCollection.prototype.forEach = Array.prototype.forEach;
It's not really clear, but are you looking for something like this?这不是很清楚,但你在寻找这样的东西吗?
targets = document.querySelectorAll('#tivvits > .grid-container')
for (let target of targets)
{console.log(target.id)}
This should select all <div>
nodes which are direct children of the <div id="tivvits">
node and have a class
attribute with the value "grid-container"
, and extract from them the attribute value of the id
attribute.这应该是 select 所有
<div>
节点,它们是<div id="tivvits">
节点的直接子节点,并且具有值为"grid-container"
的class
属性,并从中提取id
属性的属性值。
Have a go with this有一个 go 这个
I use the spread operator to allow the use of map on the HTMLCollection我使用扩展运算符允许在 HTMLCollection 上使用 map
window.addEventListener("load", function() { const gridContainers = document.querySelectorAll("#tivvits.grid-container"); const ids = [...gridContainers].map(div => div.id); console.log(ids) });
<div id="tivvits"> <div id="tivvit-19" class="grid-container">...</div> <div id="tivvit-20" class="grid-container">...</div> </div>
To just display change仅显示更改
const ids = [...gridContainers].map(div => div.id);
to至
[...gridContainers].forEach(div => console.log(div.id));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.