我正在尝试获取偶数 (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');
谢谢你的帮助。
最佳答案
注意: 此答案假设所有 .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>
关于javascript - 通过 :even and :odd 向 querySelectorAll 提供索引的替代方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72808947/