Question

我有以下问题。

我生成一个列表，其中包含具有特定类的所有元素。之后，我通过循环来替换课程。

正如您在此处所见：https://jsfiddle.net/nafxLoLz/只有2个元素中的一个被替换。 console.log清楚地表明循环只经过一次。如果我评论7个javascript代码。（见小提琴）循环工作正常。

我做错了什么？

代码：

var list = document.getElementsByClassName("default");
console.log(list.length);
for(var i = 0; i < list.length; i++)
{
  console.log(i);
  list[i].classList.add("red");
  list[i].classList.remove("default");
}

Answer 1

getElementsByClassName获取包含类default的所有元素的实时节点列表，nodeList会在元素更改时更新。

删除类default时， live nodeList的长度会发生变化，因此当您开始迭代时，对于删除了类的每个元素，长度都会减少1。

当你走到一半时，你已经改变了一半的元素，你在循环的一半，长度只有一半，所以它停止了。

解决方案是反向iteratte

var list = document.getElementsByClassName("default");

for(var i=list.length; i--;) {
  list[i].classList.add("red");
  list[i].classList.remove("default");
}

或使用querySelectorAll

获取非实时 nodeList

var list = document.querySelectorAll(".default");

Answer 2

那是因为getElementsByClassName返回的类似数组的结构是“实时”的，也就是说，如果它不满足具有该指定的类，它将自动从数组中删除。

第一次运行是由第一项引起的。它获得red类并删除default类。删除default会导致其自动从list删除。循环前进后，索引为1，但现在列表中只有1个项目。

Answer 3

尝试将另一个类名添加到不会删除的方块中，只是为了帮助识别它们：

<div class="square default">
</div>
<div class="square default">
</div>

使用＆＃39; square＆＃39;作为类选择器：

var list = document.getElementsByClassName("square");
console.log(list.length);
for(var i = 0; i < list.length; i++)
{
  console.log(i);
  list[i].classList.add("red");
  list[i].classList.remove("default");
}

这是一个证明的jsfiddle： https://jsfiddle.net/nafxLoLz/1/

Javascript for循环突然中断

3 个答案: