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

Question

我有一个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>

Answer 1

只需一个forEach循环即可。

var arrIndex = [0, 2];
var elems = document.querySelectorAll('div p');

arrIndex.forEach(function(p){
	elems[p] && elems[p].classList.add('red');
})

.red {
  color: red;
}

<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>

Answer 2

使用querySelectorAll并检查索引：

const arr = [0, 2];
const parent = document.getElementById("parent");
parent.querySelectorAll("p").forEach((elem, idx) => arr.includes(idx) ? elem.classList.add("red") : elem);

.red {
  color: red;
}

<div id="parent">
  <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>

较旧的浏览器：

var arr = [0, 2];
var parent = document.getElementById("parent");
parent.querySelectorAll("p").forEach(function(elem, idx) {
  if (arr.indexOf(idx) > -1) {
    elem.classList.add("red");
  }
});

.red {
  color: red;
}

<div id="parent">
  <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>

Answer 3

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

var arrIndex = [0, 2];
var elems = document.querySelectorAll('div p');
for(i=0; i<elems.length; i++){
  if(arrIndex.indexOf(i) !== -1){
    elems[i].classList.add('red');
  }
}

.red {
  color: red;
}

<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>

避免使用includes()，因为IE浏览器和旧版JS浏览器不支持它

另一种方法是循环索引数组以添加red类：

var arrIndex = [0, 2];
for(var i=0; i<arrIndex.length; i++){
 document.querySelectorAll('div p')[arrIndex[i]].classList.add('red');
}

.red {
  color: red;
}

<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>

Answer 4

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

var a=document.querySelectorAll('p');
var arr=[0,2]
for(let i=0;i<a.length;i++)
{
if(arr.indexOf(i)>-1)
a[i].classList.add("red");
}

.red
{
color:red
}

<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>

Answer 5

如果他们总是兄弟姐妹，那么你可以使用:nth-child() pseudo-class selector。迭代数组并生成选择器以基于选择器获取元素并迭代所选元素以添加类。

var index = [0, 2];

// generate the selector
var selector = index.map(v => `div p:nth-child(${ v + 1 })`).join();

// get elements using the selector
// iterate and add class
document.querySelectorAll(selector).forEach(e => e.classList.add('red'))

.red {
  color: red;
}

<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>

注意：这是一个ES6解决方案。

Answer 6

<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')
})