为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕婉清6462132 2023-08-24 10:13:42
我有一个 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");   }}
查看完整描述

3 回答

?
白板的微信

TA贡献1883条经验 获得超3个赞

您需要迭代结果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>


查看完整回答
反对 回复 2023-08-24
?
红颜莎娜

TA贡献1842条经验 获得超12个赞

您需要循环,因为 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")


查看完整回答
反对 回复 2023-08-24
?
慕码人2483693

TA贡献1860条经验 获得超9个赞

就我个人而言,我会使用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>


查看完整回答
反对 回复 2023-08-24
  • 3 回答
  • 0 关注
  • 108 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信