javascript - li 元素的斑马条纹组

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