querySelectorAll如何用:even/:odd选择奇偶.project元素替代手动索引

你写的:even、:odd属于jQuery扩展的自定义选择器，不在W3C标准原生CSS选择器规范里，因此原生querySelectorAll()、querySelector()方法无法识别这两个伪类，自然不会生效。
另外你写的直接给querySelectorAll()返回结果调用classList.add()也有问题：这个方法返回的是匹配到的元素集合（NodeList），集合本身没有classList属性，只有单个DOM元素才能调用这个方法。

原生CSS提供了:nth-child()伪类可以实现按位置匹配元素，注意CSS选择器的元素计数是从1开始的，和你之前手动取索引时从0开始的计数差1位，对应你之前的类名添加规则：

• 索引为0、2、4...的.project元素（即你要加EvenProject的项），对应选择器为.project:nth-child(odd)（匹配同级下第1、3、5...个位置的.project元素）
• 索引为1、3、5...的.project元素（即你要加OddProject的项），对应选择器为.project:nth-child(even)（匹配同级下第2、4、6...个位置的.project元素）

匹配到元素集合后，遍历集合给每个元素添加对应类名即可，完整代码如下：

// 给原逻辑里偶数索引的元素加EvenProject类
document.querySelectorAll('.project:nth-child(odd)').forEach(item => {
  item.classList.add('EvenProject')
})

// 给原逻辑里奇数索引的元素加OddProject类
document.querySelectorAll('.project:nth-child(even)').forEach(item => {
  item.classList.add('OddProject')
})

如果你的.project元素同级下穿插了其他非.project标签的元素，:nth-child()的计数会把其他标签也算进去，可能导致匹配不准。这种情况建议把所有.project元素放在同一个父容器下，保证父容器的直接子元素只有.project类的元素，就不会出现匹配错位的问题。

内容的提问来源于stack exchange，提问作者KRD_CoDeR_BoY