How do I add class from array to n divs using .each function?

Question

Basically what I'm trying to do is this

var arr = ["red","green","blue"];
$('.box').each(function() {
    $(this).addClass(Array Value Here)
});

and I want the result to be like this.

<div class"box red"></div>
<div class"box green"></div>
<div class"box blue"></div>
<div class"box red"></div>
<div class"box green"></div>
<div class"box blue"></div>
<div class"box red"></div>
<div class"box green"></div>
<div class"box blue"></div>

How can I do that? The number of total divs are unknown.

You are highly encouraged to accept someone's answer.

Oybek
– Oybek

2014-03-11 20:32:35 +00:00
Commented Mar 11, 2014 at 20:32 — Oybek
– Oybek, Commented Mar 11, 2014 at 20:32

moonwave99 · Accepted Answer · 2017-05-26 09:24:10Z

9

Modulo [%] is your friend:

var colours = ['red', 'green', 'blue'];
$('.box').each(function(index, element) {
  $(element).addClass(colours[index % colours.length]);
});

See fiddle.

edited May 26, 2017 at 9:24

answered Mar 11, 2014 at 17:47

moonwave99

22.9k3 gold badges48 silver badges71 bronze badges

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

4 Comments

Bill Criswell Over a year ago

It does work. I was in the process of writing this same answer: jsbin.com/nojipowo/2/edit?html,css,js,output

user3407278 Over a year ago

it works Thanks!! From where can I learn about this % ? if you don't mind...Could you explain how this works?

Bill Criswell Over a year ago

It returns the remainder of two numbers.

moonwave99 Over a year ago

@user3407278 wiki is your friend.

kkemple · Accepted Answer · 2014-03-11 17:56:25Z

2

var arr = ['red', 'green', 'blue'],
i = 0,
len = arr.length;

$('.box').each(function(index, box) {
  console.log(box);
  $(box).addClass(arr[i]);
  ++i;
  if (i === len) {
    i = 0;
  }
});

edited Mar 11, 2014 at 17:56

answered Mar 11, 2014 at 17:46

kkemple

9925 silver badges9 bronze badges

1 Comment

user3407278 Over a year ago

Could you make a jsfiddle?

Bill Criswell · Accepted Answer · 2014-03-11 17:56:03Z

0

If you're just styling you can avoid the JS all together by using :nth-child.

.box:nth-child(3n + 1) {
  color: red;
}

.box:nth-child(3n + 2) {
  color: green;
}

.box:nth-child(3n + 3) {
  color: blue;
}

answered Mar 11, 2014 at 17:56

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Comments

Bellash · Accepted Answer · 2014-03-11 18:15:01Z

0

     var arr = ['red', 'green', 'blue'];
      $('.box').each(function(i,o) {
         $(this).addClass(arr[i%arr.length]);
     });

edited Mar 11, 2014 at 18:15

answered Mar 11, 2014 at 17:52

Bellash

8,2776 gold badges57 silver badges95 bronze badges

Collectives™ on Stack Overflow

How do I add class from array to n divs using .each function?

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related