jQuery - добавить классы для разделения элементов в порядке?

Question

У меня есть классы с разными значениями в них, и я хочу добавить эти классы для упорядочения элементов.

Это должно быть просто объяснение того, что я ищу:

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

Результат:

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

Не то, чтобы эта мерзость, описанная выше, была совершенной, но есть и другая вещь. Я также думаю, что было бы здорово, если бы это зациклилось.

Допустим, у меня есть 3 класса, как и раньше, и эти 3 класса будут добавлены к 8 элементам

Результат будет следующим:

<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 -->

, поскольку в нем будут добавляться эти предустановленные классы до тех пор, пока не будет добавлено ".These" для них. Этот цикл будет работать как резервное копирование, если у вас закончатся классы ...

http://jsfiddle.net/Z4PAZ/ - jsfiddle моего примера ..

Есть идеи?

Answer 1

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

или, проще (и эффективнее):

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

В частности, для этой версии требуется только один вызов функции на элемент, тогда как для оригинала требовалось три (то есть обратный вызов, * 1005).* конструктор и addClass).

Answer 2

var classes=["first","second","third"];

$('.These').each(function(i) {
    $(this).addClass(classes[i%classes.length]);
});

http://jsfiddle.net/Z4PAZ/1

Answer 3

Если вы храните разные имена классов CSS в массиве, вы можете использовать арифметику по модулю, чтобы получить то, что вы хотите, основываясь на индексе элемента. Кроме того, функция each предоставляет параметр, который является индексом этого элемента, поэтому вам не нужно пересчитывать его с $(this).index();

var arrCssClasses = ['first', 'second', 'third']; 

$('.These').each(function(idx) {
    //var TheseINDEX = $(this).index();
    $(this).addClass(arrCssClasses[idx%arrCssClasses.length]);
});