Добавить класс CSS к дочерним элементам на основе индекса в массиве в JavaScript

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

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

Answer 4

Если они всегда родственники, вы можете использовать :nth-child() селектор псевдокласса . Выполните итерацию по массиву и сгенерируйте селектор, чтобы получить элементы на основе селектора, и итерируйте по выбранным элементам, чтобы добавить класс.

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 5

Один из способов - выбрать все элементы с этим элементом <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 6

Получить весь абзац, используя 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>