15

我写了一个函数来改变元素的类来改变它们的属性。由于某种原因，只有部分元素发生了变化。我花了几个小时才找到解决方案，但这对我来说似乎很奇怪。也许你可以给我解释一下。

这不起作用：

function replace(){
  var elements = document.getElementsByClassName('classOne');

  for (var i = 0; i < elements.length; i++) {
    elements[i].className = 'classTwo';               
  }
}

见 JSFiddle：只有第二个项目受到影响；只有每隔一个红色元素将颜色变为蓝色。

所以我将for循环的最终表达式更改为不再增加i：

function replace(){
  var elements = document.getElementsByClassName('classOne');

  for (var i = 0; i < elements.length; i) { // Here’s the difference
    elements[i].className = 'classTwo';               
  }
}

这很好用！似乎push被调用并且不需要增量。这是正常的吗？这与我见过的例子不同。

4

3 回答 3

22

发生了什么是一个奇怪的副作用。当您className为 的每个元素重新分配时elements，该元素将从数组中删除！（实际上，正如@user2428118 所指出的，elements是一个类似数组的对象，而不是数组。请参阅此线程以了解区别。）这是因为它不再具有classOne类名。当您的循环退出时（在第二种情况下），elements数组将为空。

您可以将循环编写为：

while (elements.length) {
    elements[0].className = 'classTwo'; // removes elements[0] from elements!
}

在您的第一种情况下，通过递增i，您将跳过具有 class 的（原始）元素的一半classOne。

顺便说一句，很好的问题。研究得很好，很清楚。

于 2013-03-22T04:03:38.623 回答
4

getElementsByClassName返回一个节点列表。NodeList 集合是实时集合，这意味着文档的修改会影响集合。更多的

于 2013-03-22T06:21:25.580 回答
-3

或者恢复循环，从 length-1 开始，逐步下降到 0

于 2014-12-01T14:53:57.937 回答