[英]JavaScript HtmlCollection loop never returns second element
我知道关于如何访问和遍历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 });
的技巧[].forEach.call(activeTabSheets, function(activeTabSheet) { //code here });
也不要为我工作 它只迭代一次。
一定是真的很愚蠢,但是我已经调试了好几个小时了。
getElementsByClassName
返回实时 HTMLCollection。
这行:
activeTabSheet.className.replace('tabSheetActive', 'tabSheet');
阻止列表中的第一项成为该类的成员。 因此,它被删除,其他所有东西都被拖移(因此,位于索引1处的元素移至索引0)。
要解决此问题,您可以:
querySelectorAll
返回不活动的NodeList while
循环,测试HTMLCollection的长度 ,并始终修改索引0
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.