Question

假设我调用getElementsByClassName（）并将结果存储在如下变量中：

var editButtons = document.getElementsByClassName("editButtonDisabled");

然后我遍历该变量（这是一个节点列表，因此使用.item(i)而不是[i]）并更改每个项目的类名称：

for (var i = 0; i < editButtons.length; i++) {

    var editButton = editButtons.item(i);
    editButton.className = "editButtonEnabled";

}

由于某种原因，循环跳过editButtons的所有奇数索引成员，并且只将类名更改应用于偶数编号，就好像editButtons的长度被突变一样改变其成员的属性，这在我看来不应该是预期的行为。

我知道我可以通过首先将所有元素抛出到数组中然后再循环遍历它来解决这个问题，但这需要编写两个循环时只需要一个循环，并且我很好奇它为什么要这样做这首先是。

Answer 1

是的，因为editButtons.length在每次迭代后都会发生变化，所以你应该将长度放在一个变量中：

for (var i = 0, length = editButtons.length; i < length; i++) {
    var editButton = editButtons.item(i);

    editButton.className = "editButtonEnabled";

}

编辑：

我的解决方案和长度都错了。事实上，当first button类发生更改时，按钮会弹出数组，当i递增时，second button（女巫现在位于索引0）将被跳过，依此类推。

解决方案是反向迭代：

＆＃13;

function changeClassName() {
  var buttons = document.getElementsByClassName('editButtonDisabled');

  for (var i = buttons.length - 1; i >= 0; i--) {
    var button = buttons[i];

    button.className = 'editButtonEnabled';
  }
}

＆＃13;

button {
  display: block;
  margin-bottom: .5em;
}
.editButtonDisabled {
  background: red;
}
.editButtonEnabled {
  background: green;
}

＆＃13;

<button onclick="changeClassName()">changeClassName()</button>

<button class="editButtonDisabled">Button 01</button>
<button class="editButtonDisabled">Button 02</button>
<button class="editButtonEnabled">Button 03</button>
<button class="editButtonDisabled">Button 04</button>
<button class="editButtonDisabled">Button 05</button>
<button class="editButtonDisabled">Button 06</button>
<button class="editButtonEnabled">Button 07</button>
<button class="editButtonDisabled">Button 08</button>
<button class="editButtonDisabled">Button 09</button>
<button class="editButtonDisabled">Button 10</button>

＆＃13;

迭代getElementsByClassName返回的元素并更改.className属性会产生奇怪的行为

1 个答案: