Question

我有以下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');
});

Answer 1

如果要将其添加到6组的前3个中，可以使用模数6运算符。如果您想以条纹开头，请使用以下内容：

$('#item-order li:visible').each(function (i) {
    if (i%6 <= 2) {
        $(this).addClass('stripe');
    }
});

Answer 2

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');
});

斑马条纹组元素

2 个答案: