将类添加到 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 {

  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 => { /*something happens here */});
[...document.querySelectorAll(".checkMarks")].forEach(chk => chk.classList.add("green-color"));

如果只有一个复选标记，您可以document.querySelector(".checkMarks").classList.add("green-color")不使用all，但是 vanilla JS 不支持像等效的 jQuery 那样一次性添加到列表 $(".checkMarks").addClass("green-color")中

Answer 3

就我个人而言，我会使用for...of循环（ES6）：

const divs = document.querySelectorAll(".checkMarks");

for (const div of divs) {

  div.classList.add("green-color");

}

.green-color {

  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>