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-childCSS セレクターを使用したほうがよい場合があります。

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 に答える