jQuery 将 css 添加到未排序列表中的少数列表项

Question

我有 3 个代码块(li 项组)每个 block 都需要一个单独的 CSS。由于代码是动态的，我无法将 ID 分配给 li 元素以将其置于我的控制之下。如何将单独的 CSS 添加到 3 li 元素到 header1，3 li 元素到 header 2，3 li 元素到 header 3

Fiddle

<ul class="tree">
    <li id="section">Header1 </li>
    <li> 1</li>
    <li> 2</li>
    <li> 3</li>
    <li id="section"> Header 2</li>
    <li> 4</li>
    <li> 5</li>
    <li> 6</li>
    <li id="section"> Header 3 </li>
    <li> 7</li>
    <li> 8</li>
    <li> 9</li>
</ul>

Answer 1

您可以使用 jQuery map函数来运行您自己的自定义逻辑，以决定应用什么/何时应用:

$('.tree li').map(function(index, element){

    switch(index % 4)
    {
        case 0:
          $(element).addClass('header');
          break;
        default:
          //do nothing
          break;
    }

})

jsFiddle Demo

编辑:从@jstq 的回答中得到启发，我将 case 语句更改为使用模数。它使其更具可扩展性。