Question

I know I’m close here but it only adds a class from the colors array to the 1st 3 postbox divs:

$(document).ready(function($) {

    var toCopy = $('.postbox');
    var colors = ['box1','box2','box3'];

    for (var i = 1;i < 7;i++) {
        $('.rightCol').append(toCopy.clone());
    }

    $('.postbox').each(function(i, val) {
        $(this).addClass(colors[i]);
    });

});

Here’s the end result using the above:

<div class="rightCol">
    <div class="postbox box1"></div>
    <div class="postbox box2"></div>
    <div class="postbox box3"></div>
    <div class="postbox"></div>
    <div class="postbox"></div>
    <div class="postbox"></div>
    <div class="postbox"></div>
</div>

How do I get it to keep repeating?

Answer 1

$('.postbox') has 7 elements, and colors only has 3. This is why only the 1st 3 have colors.

If you want the colors to cycle through the list, you’ll have to use the modulo operator, %.

$('.postbox').each(function(i, val) {
   $(this).addClass(colors[i % colors.length]);
});

DEMO: http://jsfiddle.net/Rt6z6/