Question

我有一个基本的jQuery行，它添加了一个类加上一个数字输出的数字，例如下面的输出：

<div class="panelCon">
<div class="panel01">Content</div>
<div class="panel02">Content</div>
<div class="panel03">Content</div>
<div class="panel04">Content</div>
<div class="panel05">Content</div>
<div class="panel06">Content</div>
</div>

我正在努力的是输出div的数学/代码，但是以1到3的周期，例如。

<div class="panelCon">    
<div class="panel01">Content</div>
<div class="panel02">Content</div>
<div class="panel03">Content</div>
<div class="panel01">Content</div>
<div class="panel02">Content</div>
<div class="panel03">Content</div>
</div>

可能是基本的东西，但我不能轻易找到帮助的参考。

由于

Answer 1

的 LIVE DEMO

$(".panelCon > div").each(function( i ){ $(this).addClass('panel0'+ ((i%3)+1) ); });

或者喜欢：

$('.panelCon > div').addClass(function( i ) { return "panel0" + ((i%3)+1) ; });

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
http://api.jquery.com/each/（其中i表示数组（集合）中元素的索引。）
http://api.jquery.com/addclass/

Answer 2

您可以使用回调到addClass和模运算符：

$('.panelCon > div').addClass(function(index) {
    return 'panel0' + ((index % 3) + 1);
});

Answer 3

使用addClass的回调签名非常简单：

$('div.panelCon div').addClass(function(idx, oldClass) {
    return 'panel' + ((idx % 3) + 1);
});

但是，如果要为样式设置添加类，则使用nth-child CSS选择器可能会更好：

div.panelCon div:nth-child(3n+1) {
    /* styles for the first column */
}
div.panelCon div:nth-child(3n+2) {
    /* styles for the second column */
}
div.panelCon div:nth-child(3n) {
    /* styles for the third column */
}

Answer 4

var i = 1;
            $(".panelCon").children("div").each(function(){
                $(this).addClass("panel0" + i);
                if(i == 3){
                    i = 0;
                }
                i++;
            });

jQuery - 添加增量为3的类

4 个答案: