我知道有关于如何访问和迭代 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 });
也不适合我。它只迭代一次。
这一定是非常愚蠢的事情,但我已经调试了好几个小时并为此抓狂了。
getElementsByClassName
返回一个liveHTML 集合。
这行:
activeTabSheet.className.replace('tabSheetActive', 'tabSheet');
阻止列表中的第一项成为类的成员。因此,它被删除,其他所有内容都被向下洗牌(因此索引 1 处的元素移动到索引 0)。
为了解决这个问题,你可以:
- Use
querySelectorAll
它返回一个非活动的 NodeList
- 循环 HTMLCollection向后
- Use a
while
循环,测试lengthHTMLCollection 的,并始终修改索引0
.
- 在循环之前将所有值复制到数组中that
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)