For 循环在每次迭代后跳过一次

For loop skips one after every other iteration

本文关键字：一次 循环 迭代 For      更新时间：2023-09-26

我有一个具有类"black"的HTML元素列表（还有其他一些类）。我想将"黑色"转换为"白色"。我编写了以下代码。

var blacks = document.getElementsByClassName("black");
for (i = 0; i < blacks.length; i++)
    blacks[i].className = blacks[i].className.replace('black', 'white');

有趣的是，一个元素变为白色，一个元素被跳过，直到元素结束。也就是说，偶数顺序的元素保持不变。我缺少什么来转换所有黑人？

document.getElementsByClassName返回一个实时NodeList，当您对它所表示的 DOM 部分进行更改时，该会自动更新。您将其视为静态列表。您可以通过将其转换为数组来做到这一点：

var blacks = [].slice.call(document.getElementsByClassName("black"));

我突然想到，你也可以：

var blacks = document.querySelectorAll(".black"); //NodeList but static

除了关于blacks是一个活nodeList的评论之外，你可以通过简单地减少循环来避免转换为数组：

var blacks = document.getElementsByClassName("black");
for (var i = blacks.length -1 ; i >= 0; --i) {
    blacks[i].className = blacks[i].className.replace('black', 'white');
}​

JS小提琴演示。

相关文章：