时间戳

首页 > 解决方案 > 如何循环遍历 htmlcollection 对象？

javascript - 如何循环遍历 htmlcollection 对象？

问题描述

我已经查看了几乎所有关于 htmlcollection 的问题。

所以我有一个 div，我正在获取数据并使用 ajax 在这个 div 中创建 div，因此它们不是硬编码的。

这是我获取数据之前 div 的样子

    <div id="tivvits"></div>

这就是我调用函数 show_all_tivvits(); 后 div#tivvits 的样子 show_all_tivvits() 是一个函数，我在其中创建 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>

这是 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]);
        }

    });

我想在 show_all_tivvits() 函数中做的是我想获取已经在 div#tivvits 中的 div，这样我就不会再次创建它们，但问题是当我console.log()用来打印document.getElementById('tivvits').getElementsByClassName('grid-container')时htmlcollection 但是当我打印出长度时它返回 0。

当我在 chrome 中打开检查 > 源时，我的 index.php 没有更新 div#tivvits。我几乎尝试了所有方法来循环这个 htmlcollection，但它不起作用。

我尝试过的事情清单；

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;

标签： javascripthtmldomhtmlcollection

解决方案

这不是很清楚，但你在寻找这样的东西吗？

targets = document.querySelectorAll('#tivvits > .grid-container')
for (let target of targets)
  {console.log(target.id)}

这应该选择所有<div>节点的直接子<div id="tivvits">节点并且具有classvalue 的属性"grid-container"，并从中提取属性的属性值id。

推荐阅读