2

我有一个基本的 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>

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

谢谢

4

4 回答 4

2

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/

于 2013-06-06T23:25:23.647 回答
2

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

$('.panelCon > div').addClass(function(index) {
    return 'panel0' + ((index % 3) + 1);
});
于 2013-06-06T23:25:47.180 回答
2

使用回调签名非常容易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 */
}
于 2013-06-06T23:25:48.297 回答
2 
var i = 1;
            $(".panelCon").children("div").each(function(){
                $(this).addClass("panel0" + i);
                if(i == 3){
                    i = 0;
                }
                i++;
            });
于 2013-06-06T23:25:51.237 回答