javascript - 通过 :even and :odd 向 querySelectorAll 提供索引的替代方法

Question

我正在尝试获取偶数 (div) 元素 并给它们不同的类名 与它们所在的奇数 (div) 元素 相比也将有不同的类名，我想在querySelectorAll() 函数中编写以获得偶数(.project)类和奇数(.project)类而不提供索引像 [0]、[1]、……等等。有没有办法做这样的事情？这里有解释代码。

原代码如下:

document.querySelectorAll('.project')[0].classList.add('EvenProject');
document.querySelectorAll('.project')[1].classList.add('OddProject');
document.querySelectorAll('.project')[2].classList.add('EvenProject');

这是我要实现的:

document.querySelectorAll('.project:even').classList.add('EvenProject');
document.querySelectorAll('.project:odd').classList.add('OddProject');

我也通过 querySelector() 尝试了这段代码，但它不起作用。

 document.querySelector('.project:even').classList.add('EvenProject');

谢谢你的帮助。

Answer 1

注意: 此答案假设所有 .project 元素都是同一父元素的子元素。

您可以使用document.querySelectorAll('.project:nth-child(even)')，查看EVEN AND ODD RULES但是，您可以完全在 CSS 中做同样的事情:

.project {
  width: 100%;
  height: 1em;
  background-color: black;
}

.project:nth-child(even) {
  background-color: blue;
}

.project:nth-child(odd) {
  background-color: green;
}

<div class="project"></div>
<div class="project"></div>
<div class="project"></div>
<div class="project"></div>
<div class="project"></div>