在javascript中基于数组中的索引向子元素添加css类

我有一个Javascript索引数组，如[0,2]

还有一堆段落元素，就像这样

<div>
  <p>some text</p>
  <p>some more text</p>
  <p>some sample text</p>
  <p>some text here</p>
  <p>some great text</p>
</div>

向其索引出现在数组中的段落添加css类的简洁方法是什么？在本例中，我希望在第一段和第三段中添加一个类

预期产出：

<div>
  <p class=“red”>some text</p>
  <p>some more text</p>
  <p class=“red”>some sample text</p>
  <p>some text here</p>
  <p>some great text</p>
</div>

使用querySelectorAll并检查索引：

常数arr=[0,2]； const parent=document.getElementByIdparent； parent.querySelectorAllp.forEachelem，idx=>arr.includesidx？elem.classList.addred：elem； 瑞德先生{ 颜色：红色； } 一些文本

更多的文字

一些示例文本

这里有一些文字

一些伟大的文本

---

使用document.querySelectorAll获取所有段落。遍历数组并将类添加到所需段落

var a=document.querySelectorAll'p'； var arr=[0,2] forlet i=0；i-1 a[i].classList.addred； } 红色 { 颜色：红色 } 一些文本

更多的文字

一些示例文本

这里有一些文字

一些伟大的文本

---

一种方法是选择包含该元素的所有元素，然后检查该特定元素的索引是否存在于数组中：

var arrIndex=[0,2]； var elems=document.queryselectoral'divp'；

---

fori=0；只要一个forEach循环就足够了

var arrIndex=[0,2]； var elems=document.queryselectoral'divp'； arrIndex.forEachfunctionp{ 元素[p]&&elems[p]。类列表。添加“红色”； } 瑞德先生{ 颜色：红色； } 一些文本

更多的文字

一些示例文本

这里有一些文字

一些伟大的文本

---

如果他们总是兄弟姐妹，那么您可以使用。迭代数组并生成选择器，以基于选择器获取元素，并迭代所选元素以添加类

var指数=[0,2]； //生成选择器 var selector=index.mapv=>`divp:n个子${v+1}`.join； //使用选择器获取元素 //迭代并添加类 document.querySelectorAllselector.forEache=>e.classList.add'red' 瑞德先生{ 颜色：红色； } 一些文本

更多的文字

一些示例文本

这里有一些文字

一些伟大的文本

---

用法：nth child……不妨发表我的观点：@clone的意思是SO不是一个代码编写服务，我们帮助编写代码，阅读时你会看到海报需要自己做出努力。编辑我的提琴以包含元素检查。应该是i==2而不是3。考虑到IE并没有完全消亡，记笔记它不起作用是合适的，即使它已经死了，许多人仍然需要支持它。OK @ LGSon，我将添加一个ES5版本。@ LGSON，我们可以避免这个索引或包含，请考虑我的第二个例子。answer@AnkitAgarwal我知道，但是，如果数组中的索引没有元素，您的解决方案可能会适得其反。@JackBashford哦，nodelist上的forEach在IE和旧浏览器中都不起作用。这是如何做到的：没有nodelist.forEach，也没有索引检查。迭代数组而不是元素的效率要高出一英里。@我已经编辑了答案。@ChrisG自从我们把这个从世界上拿出来后，我删除了我的评论，因为它们没有未来的价值……我会很快处理它。这与vikasgupta的答案相同，没有NPE检查。

<div>
  <p>Some text</p>
  <p>Some more text</p>
  <p>Some sample text</p>
  <p>Some text here</p>
  <p>Some great text</p>
</div>

.red{
    color: red;
 }


const arr = [0,2]
const para = document.querySelectorAll('p')

arr.forEach(function(arr){
  para[arr].classList.add('red')
})