Javascript 通过：even 和：odd 为 querySelectorAll 提供索引的替代方法

发布于06月30日

我试图得到偶数(div)elements，给它们different class Names，而在odd (div) elements中它们也会有different class names，我想在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()try 了这段代码，但它不起作用.

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

谢谢你的帮助.

推荐答案

NOTE: This answer assumes all 100 elements are all children of the same parent.

你可以使用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相关问答推荐

按钮未放置在html dis位置

无法在nextjs应用程序中通过id从mongoDB删除'

PrivateRoute不是路由组件错误

如何在Obsidian dataview中创建进度条

如何在Vue 3中创建自定义 Select 组件，并将选项作为HTML而不是props 传递？

在使用HighChats时如何避免Datatables重新初始化错误？

查询参数未在我的Next.js应用路由接口中定义

Puppeteer上每页的useProxy返回的不是函数/构造函数

如何在DYGRAPS中更改鼠标事件和键盘输入

<；img>；标记无法呈现图像

在查看网页时，如何使HTML中的按钮工作方式类似于鼠标上的滚轮或箭头键？

将Singleton实例设置为未定义后的Angular 变量引用持久性行为

通过解构/功能组件接收props-prop验证中缺少错误"

如何在每隔2分钟刷新OKTA令牌后停止页面刷新

在单击按钮时生成多个表单时的处理状态

我如何才能获得价值观察家&对象&S的价值？

ReactJS在类组件中更新上下文

使用Java脚本在div中创建新的span标记

在执行console.log(new X())时记录一个字符串

如何循环通过一个参数的键，该参数可以是TypeScrip中三个不同接口之一？

实用课程推荐