Javascript 简单js forloop只迭代一次

我有一个JS for循环，它用一个特定的类遍历所有元素，然后删除该类。但是，当循环为找到的第一个元素工作时，它会停止。我看不到任何错误，我已在try/catch中尝试过，但看不到可能导致问题的任何其他内容。有人有什么建议吗？谢谢：）

let visibleTags=document.getElementsByClassName（'show'）；
console.log（visibleTags.length）//长度为2
for（让index=0；index

这是因为

document.getElementsByClassName（）

正在引用与您的类匹配的实际元素数组

因此，在迭代和更改其类时，元素本身不再属于数组，因此索引变为index-1

如果没有其他路径到达对象，解决方法是依靠其他类/选择器检索元素列表：

let visibleTags=document.getElementsByClassName（'test'）；
console.log（visibleTags.length）//长度为2
for（让index=0；index

.test{
宽度：300px；
高度：300px；
边框：1px实心#ccc；
}
.表演{
背景色：红色；
}

1.
2.

您不应该使用索引，

visibleTag

是一个实时集合，您正在修改部分选择条件（show类），因此集合本身将更改。由于您希望从所有具有

show

类的内容中删除

show

，因此最好使用

while

这样的循环：

let show=document.getElementsByClassName（'show'）；
而（所示长度>0）{
已显示[0]。类列表。删除（'show'）；
}

1.
2.
3.
4.

visibleTags

是一个“实时”DOM查询-其中的元素将随着DOM的更改而更改

因此，当您从元素中删除

show

类时，它会同时从

visibleTags

中消失，因为您的查询是针对具有

show

类的元素的。因此，一旦删除该类，

visibleTags.length

将下降到

1

，循环将退出，因为循环计数器已为1

有很多方法可以解决这个问题：

• 解决这个问题的一个方法是向后运行循环，使其从

  visibleTags.length

  开始并返回到零。这样，您可以删除元素，长度将下降，但随后将移动到上一个元素，循环将继续

• 另一个选项是在循环时以

  方式运行循环，只需不断删除第一项：即：
  
  while (visibleTags.length) {
      visibleTags[0].classList.remove('show');
  }
  
  这将是我首选的解决方案
  

• 最后，您可以选择创建一个非活动的元素数组，以便循环使用。您可能不需要这样做，但是如果以后需要再次循环相同的元素列表（例如，可能要恢复

  show

  类），那么这可能是一个有用的选项

---

尝试使用此功能：

函数removeClassFromElements（类名）{
文件
.querySelectorAll（`.${className}`）
.forEach（el=>el.classList.remove（className））；
}

对于您的情况：

removeClassFromElements（'show'）；

您可以使用

querySelectorAll

选择类为

show

的所有元素

Document方法querySelectorAll（）返回一个静态（非活动）节点列表，表示与指定选择器组匹配的文档元素列表。阅读有关此选择器的更多信息

函数removeClass（）{
让visibleTags=document.querySelectorAll（“.show”）；
console.log（“所选元素的数量：”，visibleTags.length）；//长度为2
for（让index=0；index

.show{
背景色：红色；
}

删除类




1.
2.

因为

GetElementsByCassName

返回一个live。当您从集合中删除长度为2的元素时，

index

将不再通过，循环将完成。要详细说明Teemu所说的内容，对于此类用例，反转循环始终是一个好主意。换句话说，从visibleTags.length-1向后计数到零。

while (visibleTags.length) {
    visibleTags[0].classList.remove('show');
}