JavaScript HtmlCollection 循环从不 returns 第二个元素
JavaScript HtmlCollection loop never returns second element
我知道有关于如何访问和迭代 HtmlCollection 的答案,但它在这里对我不起作用:
我得到了一些带有class "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]
之后,我尝试遍历它们并像这样操纵它们的 classes:
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 });
的技巧对我也不起作用。它只迭代一次。
这一定是非常愚蠢的事情,但我已经调试了好几个小时了。
getElementsByClassName
returns 一个 live HTMLCollection.
这一行:
activeTabSheet.className.replace('tabSheetActive', 'tabSheet');
阻止列表中的第一项成为 class 的成员。因此它被删除,其他所有内容都被打乱(因此索引 1 处的元素移动到索引 0)。
要解决这个问题,您可以:
- 使用
querySelectorAll
其中 returns 一个非活动的 NodeList
- 循环 HTMLCollection 向后
- 使用
while
循环,测试HTMLCollection的length,并始终修改索引0
.
- 在遍历 that
之前将所有值复制到一个数组中
我知道有关于如何访问和迭代 HtmlCollection 的答案,但它在这里对我不起作用:
我得到了一些带有class "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]
之后,我尝试遍历它们并像这样操纵它们的 classes:
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 });
的技巧对我也不起作用。它只迭代一次。
这一定是非常愚蠢的事情,但我已经调试了好几个小时了。
getElementsByClassName
returns 一个 live HTMLCollection.
这一行:
activeTabSheet.className.replace('tabSheetActive', 'tabSheet');
阻止列表中的第一项成为 class 的成员。因此它被删除,其他所有内容都被打乱(因此索引 1 处的元素移动到索引 0)。
要解决这个问题,您可以:
- 使用
querySelectorAll
其中 returns 一个非活动的 NodeList - 循环 HTMLCollection 向后
- 使用
while
循环,测试HTMLCollection的length,并始终修改索引0
. - 在遍历 that 之前将所有值复制到一个数组中