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

Answer 3

如果将不同的CSS类名存储在数组中，则可以使用modula算法根据元素的索引获取所需的CSS类名。此外，each函数提供了一个参数，该参数是该元素的索引，因此您无需使用$(this).index();重新计算

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

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

jQuery - 按顺序添加类来分隔元素？

3 个答案: