如何循環通過htmlcollection object？

Question

我已經查看了幾乎所有關於 htmlcollection 的問題。

所以我有一個 div，我正在使用 ajax 在這個 div 中獲取數據並創建 div，因此它們不是硬編碼的。

這是我獲取數據之前 div 的樣子

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

這就是我調用 function show_all_tivvits(); 之后 div#tivvits 的樣子 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>

這是 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() function 中做的是我想獲得已經在 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;

Answer 1

這不是很清楚，但你在尋找這樣的東西嗎？

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

這應該是 select 所有<div>節點，它們是<div id="tivvits">節點的直接子節點，並且具有值為"grid-container"的class屬性，並從中提取id屬性的屬性值。

Answer 2

有一個 go 這個

我使用擴展運算符允許在 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>

僅顯示更改

const ids = [...gridContainers].map(div => div.id);

至

[...gridContainers].forEach(div => console.log(div.id));