jQuery-按顺序将类添加到单独的元素？

我有不同值的类，我想添加这些类来按顺序设置元素

这应该只是对我想要的东西的一个解释：

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

Lorem ipsum
乱数假文
乱数假文
$（'.this'）。每个（函数（）{
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>

Lorem ipsum
乱数假文
乱数假文

不是说上面那个讨厌的东西是完美的，但还有一件事。。我也在想，如果这样循环会很酷

假设我像以前一样有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 -->

Lorem ipsum
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文

因为它会一直添加这些预设类，直到没有“.this”供它们添加。这个循环的工作原理很像一个备份，以防你用完了类

-jsfiddle我的示例

有什么想法吗

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

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

---

如果将不同的CSS类名存储在一个数组中，则可以使用modula算法根据元素的索引获取所需的名称。另外，

each

函数提供了一个参数，该参数是该元素的索引，因此您无需使用

$（this）.index（）重新计算它

或者，更简单（更有效）：

特别是，此版本每个元素只需要一个函数调用，而原始版本需要三个函数调用（即回调、this

构造函数和addClass）。

您的第一个示例将在每个

div

上生成

class=“this first，second，third”

，不是你想的，只是解释性的代码all@Joonas有一个更简单的答案，没有人想到（现在在我的答案中），很好。你比我快了2秒！伟大的谢谢！竖起大拇指

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

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

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