Add css class to child elements based on index in array in javascript

Question

I have an Javascript array of indexes like so [0, 2]

And a bunch of paragraph elements like so

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

What would be a succinct way to add a css class to the paragraphs whose index appears in the array? In this case I expect a class to be added to first and third paragraphs.

Output expected:

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

What @cloned meant is that SO is not a code writing service, we help with written code, and when reading How to Ask you'll see it is expected the poster make an effort of their own. — Asons
– Asons, Commented Apr 25, 2019 at 6:35

Jack Bashford · Accepted Answer · 2019-04-25 06:45:02Z

3

Use querySelectorAll and check the index:

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>

Older browsers:

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>

edited Apr 25, 2019 at 6:45

answered Apr 25, 2019 at 6:27

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Asons Over a year ago

Given that IE is not completely dead, making a note it won't work on it is appropriate (even if it is dead for you, many still need to support it).

Jack Bashford Over a year ago

OK @LGSon, I'll add an ES5 version.

Ankit Agarwal Over a year ago

@LGSon we can avoid that indexOf or includes, please consider the second example in my answer

Asons Over a year ago

@AnkitAgarwal I know that, still, your solution might backfire if an index in the array doesn't have an element.

Asons Over a year ago

@JackBashford Well, forEach on nodelist won't work either in IE and older browsers

Vikas Gupta · Accepted Answer · 2019-04-25 07:02:38Z

3

Just a forEach loop is enough.

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>

edited Apr 25, 2019 at 7:02

answered Apr 25, 2019 at 6:38

Vikas Gupta

1,2311 gold badge12 silver badges27 bronze badges

3 Comments

user5734311 Over a year ago

This is how to do this: no NodeList.forEach, and no index check. Iterating over the array instead of the elements is more efficient by a mile.

Vikas Gupta Over a year ago

@LGSon I have edited the answer.

Asons Over a year ago

@ChrisG Since we got this out of the world, I deleted my comments as they have no future value...and will with this too soon.

Ankit Agarwal · Accepted Answer · 2019-04-25 06:28:36Z

The one way is to select all the elements with that <p> element and then check that index of that particular element exist in the array or not:

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>

Avoid using includes() as it is not supported by IE browser and old JS version browsers

Another way is to just loop the index array to add red class:

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>

ellipsis · Accepted Answer · 2019-04-25 06:35:02Z

0

Get all the paragraph using document.querySelectorAll. Traverse the array and add class to the required paragraph

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>

edited Apr 25, 2019 at 6:35

answered Apr 25, 2019 at 6:27

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

1 Comment

Jack Bashford Over a year ago

Should be i == 2 not 3.

Pranav C Balan · Accepted Answer · 2019-04-25 06:52:01Z

0

If they are always siblings then you can use :nth-child() pseudo-class selector. Iterate over the array and generate the selector to get elements based on the selector and iterate over the selected elements to add class.

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>

NOTE : It's an ES6 solution.

edited Apr 25, 2019 at 6:52

answered Apr 25, 2019 at 6:49

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Comments

ilyandho · Accepted Answer · 2019-04-25 07:20:27Z

0

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

answered Apr 25, 2019 at 7:20

ilyandho

11 bronze badge

1 Comment

user5734311 Over a year ago

This is the same as vikasgupta's answer, without the NPE check.

Collectives™ on Stack Overflow

Add css class to child elements based on index in array in javascript

6 Answers 6

5 Comments

3 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

3 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related