How can I access classes within arrays and style them using javascript

Question

So let's say I have 3 different classes: one, two, and three. Each class has 3 div's like this:

<div class="one"></div>
<div class="one"></div>
<div class="one"></div>

<div class="two"></div>
<div class="two"></div>
<div class="two"></div>

<div class="three"></div>
<div class="three"></div>
<div class="three"></div>

Then I give each class a variable:

var _1 = document.getElementsByClassName("one");
var _2 = document.getElementsByClassName("two");
var _3 = document.getElementsByClassName("three);

Then I put them all in an array call nums:

var nums = [_1,_2,_3];

If I wanted to then go through and change the text color of every single div in the classes: one, two, and three. How would I go about doing that without doing something like this:

function textColor() {
  var i;
  for (i = 0; i < _1.length; i++) {
    _1[i].style.color = "red";
  }

for (i = 0; i < _2.length; i++) {
        _2[i].style.color = "red";
      }

for (i = 0; i < _3.length; i++) {
        _3[i].style.color = "red";
      }
}

I would really like to only have one for loop that goes through and gets all the items in the array nums, and then goes through and gets every div from every item in nums and changes the text color.

Possible duplicate of [How to merge two arrays in JavaScript and de-duplicate items](https://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items) — Taplar, Dec 13 '17 at 22:37
You can merge the arrays together, and then loop over that one array — Taplar, Dec 13 '17 at 22:38
Why don't you just add a style tag with your styles for the classes if you want to add styles dynamically. The way you are doing it atm seems unnecessary. — ramesh, Dec 13 '17 at 22:39
https://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript. Follow this to add style dynamically — ramesh, Dec 13 '17 at 22:41

Gabriele Petrioli · Accepted Answer · 2017-12-13T22:46:03.877

1

Use concat when putting them in nums (and convert the NodeLists to arrays)

var nums = Array.from(_1).concat(Array.from(_2)).concat(Array.from(_3));

Or use the spread operator

var nums = [..._1,..._2,..._3];

Then you can do

function textColor() {
  nums.forEach(node => node.style.color = 'red');
}

edited Dec 13 '17 at 22:46

answered Dec 13 '17 at 22:39

Gabriele Petrioli

191,379
34
261
317

score 1 · Answer 2 · answered Dec 13 '17 at 22:50

1

You can flatten your nums array like this:

var flatNums = [].concat.apply([],nums)

and then go through it:

for (i = 0; i < flatNums.length; i++) {
    flatNums[i].style.color = "red";
}

answered Dec 13 '17 at 22:50

Mikser

929
10
16

score 1 · Answer 3 · answered Dec 13 '17 at 22:50

1

I would just do something like this:
$(".one, .two, .three").prop("style","color: red;");

Or add a second class for all nine div:s.

answered Dec 13 '17 at 22:50

Karl-Henry Martinsson

2,770
15
25

Or, even shorter: $(".one, .two, .three").css("color","red"); Since jQuery is tagged, best answer. :) – sinisake Dec 13 '17 at 22:53

score 0 · Answer 4 · answered Dec 13 '17 at 22:48

If you will apply same style to all divs, you can simplify things even more:

divs=document.querySelectorAll('.one, .two, .three');
divs.forEach(function(el) {
el.style.color='red';
})

divs=document.querySelectorAll('.one, .two, .three');
divs.forEach(function(el) {
el.style.color='red';
})

<div class="one">1</div>
<div class="one">2</div>
<div class="one">3</div>

<div class="6">
skip
</div>

<div class="two">4</div>
<div class="two">5</div>
<div class="two">6</div>

<div class="three">7</div>
<div class="three">8</div>
<div class="three">9</div>

How can I access classes within arrays and style them using javascript

4 Answers4