Question

也许其他人问同样的问题，但我没有在可能已经有你的答案的问题中找到任何类似的结果，所以我会继续问我的问题。我知道这是活着列表，当第一个className更改列表时从3项到2项。所以我现在是1，所以这就是为什么它跳过第二项＆＃34;从列表中。什么是将所有项目包含在循环中的实时节点列表中的最佳方法？（也许使用静态的？）

＆＃13;

error: ‘bool operator[](char, int)’ must be a nonstatic member function
bool operator [](char c,int n);

＆＃13;

        var hotElements = document.getElementsByClassName("hot");
        var i;
        var len = hotElements.length;

        for ( i= 0; i < len ;  i++) {
            hotElements[i].className = "pink";
  }

＆＃13;

        .hot {
  background-color: red;
  color: black;
  font-size: 20px;
  weight: 700;
}
.cool {
  background-color: blue;
  font-size: 25px;
}
.pink {
  background-color: pink;
  font-size: 35px;

＆＃13;

Answer 1

document.getElementsByClassName是实时的，这意味着当className更改时，元素将自动删除。

试试这个：

＆＃13;

var hotElements = document.getElementsByClassName("hot");

// While loop to iterate while there are items left
while(hotElements.length > 0) {
    hotElements[0].className = "pink";  
}

＆＃13;

.hot {
  background-color: red;
  color: black;
  font-size: 20px;
  weight: 700;
}
.cool {
  background-color: blue;
  font-size: 25px;
}
.pink {
  background-color: pink;
  font-size: 35px;

＆＃13;

<h1 id="header"> List King </h1>
<h2>Buy groceries</h2>
<ul>
  <li id="one" class="hot"> Fresh </li>
  <li id="two" class="hot"> Fresh 1</li>
  <li id="three" class="hot"> Fresh 2 </li>
  <li id="one" class="cool"> Fresh </li>
  <li id="two" class="cool"> Fresh 1</li>
  <li id="three" class="cool"> Fresh 2 </li>
 </ul>

＆＃13;

Answer 2

过去使用的一种方法是向后循环集合，这样如果删除某个项目，它不会影响任何剩余元素的位置：

var hotElements = document.getElementsByClassName("hot"),
  i;

for (i = hotElements.length - 1; 0 <= i;  i--) {
  hotElements[i].className = "pink";
}

这种方法相对于NikxDa提出的while(hotElements.length > 0)解决方案的一个优点是，如果您有条件地应用新的className而不是执行此操作，则不依赖于删除的元素每个元素。

您还可以将实时节点集合转换为不会更改的实际数组。

使用ES2015可以很容易地使用spread语法：

var hotElements = document.getElementsByClassName("hot");

[...hotElements].forEach(function (element) {
  element.className = "pink";
});

您还可以使用更多代码在ES5中执行此操作：

var hotElements = document.getElementsByClassName("hot");

Array.prototype.slice.call(hotElements).forEach(function (element) {
  element.className = "pink";
});

使用slice转换为数组将无法在IE＆lt; 9 ......但在这个时间点可能不是一个问题。

另一种方法是使用querySelectorAll。它返回一个非实时NodeList，所以如果你用它来查找元素，你仍然可以向前循环它：

var hotElements = document.querySelectorAll(".hot"),
  i,
  len = hotElements.length;

for (i = 0; i < len ;  i++) {
    hotElements[i].className = "pink";
}

有趣的相关文章：A comprehensive dive into NodeLists, Arrays, converting NodeLists and understanding the DOM

Javascript Live Nodelist循环

2 个答案: