4

我有这个 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 动态地进行编码。

4

7 回答 7

13

要在一个选择器中执行此操作，请使用nth-childor eq：

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 个元素（无论它是否是当前项目的子项），而将为您提供当前项目的子项。eq

于 2013-03-05T12:18:13.653 回答
9 
$(".how-long li").eq(3).addClass('change-color');
于 2013-03-05T12:17:10.153 回答
2

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

按索引：

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

通过引用值：

$(".how-long li[value=7]").addClass('change-color');
于 2013-03-05T12:18:58.990 回答
1

如果要使用 slice 方法，则需要指定缺少的 end 属性

$(".how-long li").slice(3,4).addClass('change-color');
于 2013-03-05T12:21:19.970 回答
0

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

你总是可以使用 $('.how-long li:nth-child(4)');

更多信息在这里：http ://api.jquery.com/nth-child-selector/

于 2013-03-05T12:22:52.237 回答
0

您可以使用第n 个子选择器：

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

 alert($(".how-long li:nth-child(4)").html());
于 2013-03-05T12:29:32.593 回答
-1

这样做

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

这将把类添加test到第 4 li

希望这个问题

于 2013-03-05T12:20:15.233 回答