Javascript 使用JQuery将数组中的类应用于重复项

我知道我离这里很近，但它只将颜色数组中的一个类添加到前3个邮箱div中：

$(document).ready(function($) {

    var toCopy = $('.postbox');
    var colors = ['box1','box2','box3'];

    for (var i = 1;i < 7;i++) {
        $('.rightCol').append(toCopy.clone());
    }

    $('.postbox').each(function(i, val) {
        $(this).addClass(colors[i]);
    });

});

$（文档）.ready（函数（$）{
变量toCopy=$（'.postbox'）；
变量颜色=['box1'、'box2'、'box3']；
对于（变量i=1；i<7；i++）{
$（'.rightCol'）.append（toCopy.clone（））；
}
$（'.postbox'）。每个（函数（i，val）{
$（this.addClass（colors[i]）；
});
});

以下是使用上述方法的最终结果：

<div class="rightCol">
    <div class="postbox box1"></div>
    <div class="postbox box2"></div>
    <div class="postbox box3"></div>
    <div class="postbox"></div>
    <div class="postbox"></div>
    <div class="postbox"></div>
    <div class="postbox"></div>
</div>

我如何让它不断重复

$（'.postbox'）

有7个元素，

颜色

只有3个元素。这就是为什么只有前3个有颜色

如果希望颜色在列表中循环，则必须使用，

%

$('.postbox').each(function(i, val) {
   $(this).addClass(colors[i % colors.length]);
});

---

演示：

您可能需要使用

%

操作符：

 $(this).addClass(colors[i%colors.length]);

试一试：

---

%

运算符 根据，

%

运算符表示

模

，这将为您提供除法的剩余部分

例如：

3%2

将为您提供

1

，因为

2x1+1=3

希望它能帮到你

---

%

的其他用法！

%

在确定行是奇数还是偶数时非常有用。
参考：

---

因为

i%2

只会给你0或1。

有没有办法我可以循环这3个类并将类应用到其他4个？@Rob:我编辑了我的答案。使用

i%colors.lenth

可以满足您的需要。当你在元素中循环时，它会在颜色数组中循环。Hmmm似乎不起作用-我会把它弄得一团糟bit@Rob：我拼写了

length

错了><这似乎对我有用：哈哈，是的-就这样！谢谢

(i % 2) ? /*Even*/ : /*Odd*/