将类添加到 for 循环中的所有元素

Question

我有一个 for 循环来完成某个任务。现在在 for 循环中，在最后一次迭代中，我需要将类添加到green-color具有 class 的所有元素checkMarks。

这是我的代码，目前它green-color仅将类添加到第一个元素。有没有一种方法可以做到这一点，而不必在当前 for 循环内使用另一个 for 循环？

const studentLength = 24;

for(let i=0; i<studentLength; i++){

   //something happens here

   if(i===studentLength ){ //if last iteration 

       document.querySelectorAll(".checkMarks").classList.add("green-color");

   }

}

Answer 1

您需要迭代结果querySelectorAll并将该类应用于每个元素：document.querySelectorAll(".checkMarks").forEach(e => e.classList.add("green-color"));.green-color {&nbsp; color: green;}<div class="checkMarks">TEST</div><div class="checkMarks">TEST2</div><div class="checkMarks">TEST3</div><div class="checkMarks">TEST4</div><div class="checkMarks">TEST5</div><div class="checkMarks">TEST6</div><div class="checkMarks">TEST7</div>

Answer 2

您需要循环，因为 querySelectorAll 中的 All 返回一个节点列表，但您也应该对学生使用 forEach 我将其包装在扩展中以处理早期的 EDGE 浏览器students.forEach(student&nbsp;=>&nbsp;{&nbsp;/*something&nbsp;happens&nbsp;here&nbsp;*/}); [...document.querySelectorAll(".checkMarks")].forEach(chk&nbsp;=>&nbsp;chk.classList.add("green-color"));如果只有一个复选标记，您可以document.querySelector(".checkMarks").classList.add("green-color")不使用all，但是 vanilla JS 不支持像等效的 jQuery 那样一次性添加到列表&nbsp;$(".checkMarks").addClass("green-color")中

Answer 3

就我个人而言，我会使用for...of循环（ES6）：const divs = document.querySelectorAll(".checkMarks");for (const div of divs) {&nbsp; div.classList.add("green-color");}.green-color {&nbsp; color: green;}<div class="checkMarks">DIV1</div><div class="checkMarks">DIV2</div><div class="checkMarks">DIV3</div><div class="checkMarks">DIV4</div><div class="checkMarks">DIV5</div><div class="checkMarks">DIV6</div><div class="checkMarks">DIV7</div>