jQuery划分元素並添加類

Question

我想在我的導航中計算我的 li 元素並將它們分成四類，以獲得單獨的邊框顏色。

它應該看起來像：

<ul>
    <li class="red"></li>
    <li class="yellow"></li>
    <li class="green"></li>
    <li class="blue"></li>
    <li class="red"></li>
    <li class="yellow"></li>
    <li class="green"></li>
    <li class="blue"></li>
</ul>

當然我希望它動態地使用 jQuery。

我試過了：

$('#navbar li').each(function(i) {
    $(this).addClass('className-' + i);
});

但該代碼計算了我 ul 中的所有 li 元素。

感謝幫助！

Answer 1

您可以將這些類存儲在一個數組中，並根據除以 4 (i%4) 時元素索引的余數為每個 li 元素分配一個類。

 var classNames=['red','yellow','green','blue']; $('li').each(function(i) { $(this).addClass(classNames[i%4]); });

 .red{ color:red; } .yellow{ color:yellow; } .green{ color:green; } .blue{ color:blue; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> <li>Ten</li> </ul>