如何通过 JavaScript 的 class 名称来 select 偶数元素？

Question

我一直在尝试通过单击按钮来更改这些 div 的颜色。 但我一直无法像 CSS -> nth-child(even) 中的 select 偶数 div。

帮助我 select 甚至只有 class 名称为“newBox”的 div。 谢谢你

const mainContainer = document.querySelector('.main_box');

for (let i = 0; i < 10; i++) {
  const newBox = document.createElement('div');
  newBox.classList.add('newBox');
  mainContainer.appendChild(newBox);
}

function change() {
  //I want here to select only the even divs
  document.querySelectorAll('.newBox').forEach((divs) => {
    divs.style.backgroundColor = "green";
  })
}

Answer 1

您必须像这样使用:nth-child选择器

document.querySelectorAll('.newBox:nth-child(even)')

在W3Schools中阅读有关它的更多信息

顺便说一句，这是重复的

Answer 2

使用document.querySelectorAll('.newBox:nth-child(even)')

<div class="main_box"></div>

.newBox {
    height: 10px;
    background-color: wheat;
}

const mainContainer = document.querySelector('.main_box');

for (let i = 0; i < 10; i++) {
    const newBox = document.createElement('div');
    newBox.classList.add('newBox');
    mainContainer.appendChild(newBox);
}

function change() {
    document.querySelectorAll('.newBox:nth-child(even)').forEach((divs) => {
       divs.style.backgroundColor = "green";
   })
}
change();