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/< /a> - 我的例子的 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) 构造函数和 添加类）。

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