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

Question

我知道我离这里很近，但它只将颜色数组中的一个类添加到第一个 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]);
    });

});

下面是使用上述方法的最终结果:

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

如何让它不断重复？

Answer 1

$('.postbox') 有 7 个元素，而 colors 只有 3 个。这就是为什么只有前 3 个有颜色。

如果你想让颜色在列表中循环，你必须使用 modulo operator , %。

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

演示:http://jsfiddle.net/Rt6z6/