为什么我的JavaScript for-loop跳过元素？ [英] Why is my JavaScript for-loop skipping elements?

问题描述

对于循环，我有一个循环，它贯穿一组元素，从每个元素中移除'selected'类。但是，它会跳过每一次迭代。我发现我可以通过添加 j - 来解决这个问题，除了延长我的代码之外，我想这很好。但是我想知道是否有人可以解释为什么它跳过，也许建议一个更简洁的方式来编写这段代码？ （我仍然在学习绳索，并希望确定我明白发生了什么）。



  var selections = document.getElementsByClassName （名称+选定）; 
 for（var j = 0; j  selections [j] .classList.remove（'selected'）; 
 j--; //定义
} 
 
 //其中name是当前变量
  



$ p


解决方案

这是因为 getElementsByClassName（）返回直播 HtmlCollection ;换句话说， HtmlCollection 自动更新，因此当您从元素中移除selected类时，将该元素从集合中移除。

您可以简单地执行操作;

  var selections = document.getElementsByClassName （名称+选定）; 
 while（selections.length）{
 selections [0] .classList.remove（'selected'）; 
} 
  

...相反。

---

另外，正如

  for（var j = selections .length-1; j> = 0; j--）{
 selections [j] .classList.remove（'selected'）; 
 
 $ / code> 

或者，您可以避免使用 HtmlCollection 完全通过将集合复制到一个数组中;



  var selections = Array.prototype.slice.call （document.getElementsByClassName（name +'selected'））; 
 for（var j = 0; j  selections [j] .classList.remove（'selected'）; 
 
 $ / code> 

...或者如 / document / querySelectorAllrel =nofollow noreferrer> querySelectorAll 改为;



  var selections = document.querySelectorAll（'。'+ name +'selected'）; 
 for（var j = 0; j  selections [j] .classList.remove（'selected'）; 
} 
  




I have a for loop that runs through a set of elements, removing the 'selected' class from each. However, it skips over every second iteration. I've found that I can get around this by adding j--, which I guess is fine except for lengthening my code. But I wonder if someone could explain why it skips and perhaps suggest a more succinct way of writing this code? (I'm still learning the ropes and want to make sure I understand what's going on.)

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

Thanks for your time!

解决方案

This is because getElementsByClassName() returns a live HtmlCollection; in other words, the HtmlCollection automatically updates, so as you remove the class "selected" from an element, that element is removed from the collection.

You can simply do;

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

... instead.

---

Alternatively, as pointed out by Paul Roub in the comments, you can iterate in reverse;

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

Or, you can avoid a live HtmlCollection completely, either by copying the collection to an array;

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

... or, as pointed out by Yury Tarabanko in the comments, using querySelectorAll instead;

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

这篇关于为什么我的JavaScript for-loop跳过元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！