如何将类添加到特定的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。

我希望这个不添加ID 到每个li元素。 我可以直接在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个元素（无论它是否是当前项的子项），而{{1}会给你当前项目的孩子。

Answer 2

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

Answer 3

slice不返回jQuery对象，因此不能使用addClass方法。 做你想要的正确方法是：

按索引：

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

引用值：

$(".how-long li[value=7]").addClass('change-color');

Answer 4

如果要使用切片方法，则需要指定缺少的结束属性

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

Answer 5

它选择第4个因为数组索引从0开始。

你可以随时使用$（＆＃39; .how-long li：nth-​​child（4）＆＃39;）;

此处提供更多信息：http://api.jquery.com/nth-child-selector/

Answer 6

您可以使用nth-child selector：

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

 alert($(".how-long li:nth-child(4)").html());

Answer 7

这样做

$(".how-long li:nth-child(4)").attr({'class':'test'});

这会将课程test添加到第4个li

希望这是好消息