为什么我的 JavaScript for 循环会跳过元素？ [复制]

Question

我有一个 for 循环，它遍历一组元素，从每个元素中删除 'selected' 类。但是，它会跳过每第二次迭代。我发现我可以通过添加j-- 来解决这个问题，我想这很好，除了延长我的代码。但我想知道是否有人可以解释为什么它会跳过，并可能建议一种更简洁的方式来编写这段代码？ （我仍在学习中，并希望确保我了解发生了什么。）

var selections = document.getElementsByClassName(name + 'selected');
for (var j = 0; j < selections.length; j++) {
  selections[j].classList.remove('selected');
  j--; // the fix
}

// where name is a present variable

感谢您的宝贵时间！

Answer 1

这是因为getElementsByClassName() 返回一个live HtmlCollection；换句话说，HtmlCollection 会自动更新，因此当您从元素中删除“selected”类时，该元素将从集合中删除。

你可以简单地做；

var selections = document.getElementsByClassName(name + 'selected');
while (selections.length) {
    selections[0].classList.remove('selected');
}

... 相反。

---

或者，正如 cmets 中的 Paul Roub 所指出的，您可以反向迭代；

for (var j = selections.length-1; j >= 0; j--) {
  selections[j].classList.remove('selected');
}

或者，您可以通过将集合复制到数组中来完全避免实时 HtmlCollection；

var selections = Array.prototype.slice.call(document.getElementsByClassName(name + 'selected'));
for (var j = 0; j < selections.length; j++) {
  selections[j].classList.remove('selected');
}

... 或者，正如 cmets 中的 Yury Tarabanko 所指出的，改用 querySelectorAll；

var selections = document.querySelectorAll('.' + name + 'selected');
for (var j = 0; j < selections.length; j++) {
  selections[j].classList.remove('selected');
}

Answer 2

getElementsByClassName 是一个实时的 HTML 集合，因此当您删除该元素的类时，它会更新。所以这意味着索引中的内容现在位于您删除元素的位置。

var selections = document.getElementsByClassName('selected');
console.log("before: ", selections.length);
selections[0].classList.remove("selected");
console.log("after: ", selections.length);

<div class="selected"></div>
<div class="selected"></div>
<div class="selected"></div>
<div class="selected"></div>
<div class="selected"></div>

向后循环有效，因为项目没有向下移动。

选项选项是做一个while循环。

var selections = document.getElementsByClassName('selected');
while(selections.length) {
    selections[0].classList.remove("selected");
}