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) {
    $(this).addClass(classes[i%classes.length]);
});

http://jsfiddle.net/Z4PAZ/1

Answer 2

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