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 — Taplar
– Taplar, Commented Dec 13, 2017 at 22:37
You can merge the arrays together, and then loop over that one array — Taplar
– Taplar, Commented Dec 13, 2017 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
– ramesh, Commented Dec 13, 2017 at 22:39
stackoverflow.com/questions/524696/…. Follow this to add style dynamically — ramesh
– ramesh, Commented Dec 13, 2017 at 22:41

Gabriele Petrioli · Accepted Answer · 2017-12-13 22:46:03Z

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, 2017 at 22:46

answered Dec 13, 2017 at 22:39

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

Comments

Mikser · Accepted Answer · 2017-12-13 22:50:20Z

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, 2017 at 22:50

Mikser

1,01911 silver badges16 bronze badges

Comments

Karl-Henry Martinsson · Accepted Answer · 2017-12-13 22:50:58Z

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, 2017 at 22:50

Karl-Henry Martinsson

2,79518 silver badges25 bronze badges

1 Comment

sinisake Over a year ago

Or, even shorter: $(".one, .two, .three").css("color","red"); Since jQuery is tagged, best answer. :)

sinisake · Accepted Answer · 2017-12-13 22:48:55Z

0

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>

answered Dec 13, 2017 at 22:48

sinisake

11.3k2 gold badges21 silver badges29 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related