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.

Answer 1

Modulo [%] is your friend:

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

See fiddle.

Answer 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;
  }
});