JavaScript HtmlCollection循环永远不会返回第二个元素

时间:2015-05-28 12:05:39

标签: javascript loops htmlcollection

我知道有关如何访问和迭代HtmlCollection的答案,但它在这里对我不起作用:
我使用“tabSheetActive”类获得了一些元素,其数量可以是1或更多 我用以下方式访问它们:

var activeTabSheets = document.getElementsByClassName('tabSheetActive');
console.log('Active sheets amount: ' + activeTabSheets.length); // outputs 2

记录集合输出以下内容:

[div.tabSheetActive.sheet_512_0, div.tabSheetActive.sheet_512_0]

之后我尝试迭代它们并像这样操纵它们的类:

for (var i = 0; i < activeTabSheets.length; i++) { // just iterates one time
    var activeTabSheet = activeTabSheets[i];
    console.log("Index: " + i); // outputs 0 
    console.log(activeTabSheet); // outputs first element
    var newClassName = activeTabSheet.className.replace('tabSheetActive', 'tabSheet');
    activeTabSheet.className = newClassName;
}

[].forEach.call(activeTabSheets, function(activeTabSheet) { //code here });的技巧对我来说都不起作用。它只迭代一次。
它一定是非常愚蠢的东西,但我一直在调试并将头发撕掉几个小时。

1 个答案:

答案 0 :(得分:2)

getElementsByClassName会返回直播 HTMLCollection。

这一行:

activeTabSheet.className.replace('tabSheetActive', 'tabSheet');

阻止列表中的第一项成为该类的成员。因此它被删除,其他所有内容都被拖垮(因此索引1处的元素移动到索引0)。

为了解决这个问题,您可以:

  • 使用返回非实时NodeList的querySelectorAll
  • 向后循环HTMLCollection
  • 使用while循环,测试HTMLCollection的长度,并始终修改索引0
  • 在循环
  • 之前,将所有值复制到数组中