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

因爲它會不斷增加，這些預設班，直到那裏有沒有「theses.the」他們被添加到。這種循環會很多工作就像一個備份櫃面您運行的類...

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

特別是，這個版本每個元素只需要一個函數調用，而原來需要三個（即回調，$(this)構造函數和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類名，您可以使用MODULA算術，讓你基於元素的索引所需的一個。此外，each功能提供一個參數，它是元素的索引，所以你不需要用$(this).index();

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

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