4

次のHTMLがあり、コンテンツを3つのグループにゼブラストライプしたいと思います。

<ul id="item-order">

    <li class="thumbnail">Item 1</li>
    <li class="thumbnail">Item 2</li>
    <li class="thumbnail">Item 3</li>
    <li class="thumbnail">Item 4</li>
    <li class="thumbnail">Item 5</li>
    <li class="thumbnail">Item 6</li>
    <li class="thumbnail">Item 7</li>
    <li class="thumbnail">Item 8</li>
    <li class="thumbnail">Item 9</li>

</ul>

そこで、jQueryを使用して以下を生成したいと思います。

<ul id="item-order">
    <li class="thumbnail stripe">Item 1</li>
    <li class="thumbnail stripe">Item 2</li>
    <li class="thumbnail stripe">Item 3</li>
    <li class="thumbnail">Item 4</li>
    <li class="thumbnail">Item 5</li>
    <li class="thumbnail">Item 6</li>
    <li class="thumbnail stripe">Item 7</li>
    <li class="thumbnail stripe">Item 8</li>
    <li class="thumbnail stripe">Item 9</li>
</ul>

どうすればこれに取り組むことができますか？私はこのようなことを念頭に置いていますが、ifステートメントに何を入れるべきかわかりません。

$('#item-order li:visible').each(function (i) {
    if (...) $(this).addClass('stripe');
});
4

2 に答える 2

5

6のセットの最初の3つに追加する場合は、モジュラス6演算子を使用できます。ストライプから始めたい場合は、以下を使用してください。

$('#item-order li:visible').each(function (i) {
    if (i%6 <= 2) {
        $(this).addClass('stripe');
    }
});
于 2012-12-03T23:05:23.080 に答える
0

jqueryには：oddセレクターと：evenセレクターがあるので、次のことができます。

$( '#item-order li:odd' ).addClass( 'odd' );
$( '#item-order li:even' ).addClass( 'even' );

編集、完全に要点を逃した、これはあなたが望むものについてであるはずです：

$('#item-order li:visible').each(function (i) {
    if( i % 6 <= 2 ) $(this).addClass('stripe');
});
于 2012-12-03T23:00:48.703 に答える