如何将类添加到特定的li？

Question

我有这个HTML:

<ul class="how-long">
    <li value="1">Any</li>
    <li value="1">1 day</li>
    <li value="2">Week end</li>
    <li value="7">1 Week</li>
    <li value="14">2 Week</li>
    <li value="21">3 Week</li>
</ul>

在准备好文档时,我想在第4个li元素中添加新类.

这是我试过的:

$(".how-long li").slice(3).addClass('change-color');

如果我发出警报:

alert($(".how-long li").slice(3).html());

它给了我 1周这是正确的,但是当我添加类时,该类被添加到第4个li之后的所有li.

我希望这个没有为每个li元素添加ID.我可以直接在li元素中硬编码类,但我想使用jQuery动态地编写它.

Answer 1

要在一个选择器中执行此操作,请使用nth-child或eq:

nth-child是相当快,看我jsPerf这里:http://jsperf.com/nth-child-vs-eq

nth-child:

$(".how-long li:nth-child(4)").addClass('change-color');

eq:

$(".how-long li:eq(3)").addClass('change-color');

根本区别在于,nth-child它将为您提供该类的每个项目的第4个元素(无论它是否是当前项目的子项),而eq将为您提供当前项目的子项.

Answer 2

$(".how-long li").eq(3).addClass('change-color');