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

时间:2013-03-05 12:16:01

标签: javascript jquery

我有这个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动态地编写它。

7 个答案:

答案 0 :(得分:13)

要在一个选择器中执行此操作,请使用nth-childeq

nth-child 快得多,请在此处查看我的jsPerf:http://jsperf.com/nth-child-vs-eq

jsperf

nth-child

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

eq

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

根本区别在于nth-child将为您提供每个项的第4个元素(无论它是否是当前项的子项),而{{1}会给你当前项目的孩子。

答案 1 :(得分:9)

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

答案 2 :(得分:2)

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

按索引:

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

引用值:

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

答案 3 :(得分:1)

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

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

答案 4 :(得分:0)

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

你可以随时使用$(&#39; .how-long li:nth-​​child(4)&#39;);

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

答案 5 :(得分:0)

您可以使用nth-child selector

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

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

答案 6 :(得分:-1)

这样做

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

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

希望这是好消息