为什么我的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()返回现场HtmlCollection ; 换句话说,HtmlCollection自动更新,因此当您从元素中删除"selected"类时,该元素将从集合中删除.

你可以干脆做;

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

......而是.

或者,正如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');
}

......或者,正如Yury Tarabanko在评论中指出的那样,使用querySelectorAll;

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