Question

I have classes with different values in them and i want to add those classes to set elements in order.

This is supposed to be just an explanation of what im looking for:

<div class="These">Lorem ipsum</div>
<div class="These">Lorem ipsum</div>
<div class="These">Lorem ipsum</div>

$('.These').each(function() {
    var TheseINDEX = $(this).index();
    $(this).addClass('first, second, third');
});

Result:

<div class="These first">Lorem ipsum</div>
<div class="These second">Lorem ipsum</div>
<div class="These third">Lorem ipsum</div>

Not like that abomination above was perfect but theres another thing.. I’m also thinking that it would be cool if that would loop.

Lets say i have 3 classes just like before and those 3 classes would be added to 8 elements

Result would be this:

<div class="These first">Lorem ipsum</div> <!-- #1 -->
<div class="These second">Lorem ipsum</div>
<div class="These third">Lorem ipsum</div>
<div class="These first">Lorem ipsum</div>
<div class="These second">Lorem ipsum</div>
<div class="These third">Lorem ipsum</div>
<div class="These first">Lorem ipsum</div>
<div class="These second">Lorem ipsum</div> <!-- #8 -->

as in it would keep adding these preset classes until theres no “.These” for them to be added to. This looping would work much like a backup incase you run out of classes…

http://jsfiddle.net/Z4PAZ/ – jsfiddle of my example..

Any ideas?

Answer 1

var classes = ['first', 'second', 'third'];
$('.These').each(function(i, el) {
    $(this).addClass(classes[i  % classes.length]);
});

or, more simply (and efficiently):

var classes = ['first', 'second', 'third'];
$('.These').addClass(function(i, c) {
    return classes[i % classes.length];
});

In particular, this version requires only one function call per element, whereas the original required three (i.e. the callback, the $(this) constructor, and addClass).