使用jQuery在第三个之后为每个项添加类

Question

我有一个非常简单的HTML，如下所示：

<ul class="my_class">
<li>List</li>
<li>List</li>
<li>List</li>
<li>List</li>
<li>List</li>
</ul>

我想要的是为第3 <li>之后追加的每个<li>添加“fred”类。

这个小功能是将它添加到前3项：

$('ul.my_class li:lt(3)').addClass('fred');

提前感谢大家的帮助！

的Dom

Answer 1

您可以使用以下脚本：

$('ul.my_class li:nth-child(1n+4)').addClass('fred');

您可以在此处测试结果：http://css-tricks.com/examples/nth-child-tester/

更新：即使在获得一些赞成票后，我也更喜欢Schiavini's answer。它更具可读性，语义更正确

Answer 2

这样做：

$('ul.my_class li:gt(2)').addClass('fred');

Answer 3

<强>解决方案：

以下内容会在第三个元素后面的所有'fred'元素中添加<li>：

$('ul.my_class li:gt(2)').addClass('fred');​

<强> Working Solution Example

您现有代码的说明：

$('ul.my_class li:lt(3)').addClass('fred');​

会将'fred'添加到从第一个到第三个的所有<li>个元素中。

<强> Example of your existing code

Answer 4

使用gt（大于）而不是lt（小于），并从2开始，因为索引从零开始：

$('ul.my_class li:gt(2)').addClass('fred');

以下是官方规格： :gt() Selector – jQuery API

Answer 5

使用以下选择器： UL.my_class > LI + LI + LI + LI

:gt()选择器是非标准的，因此在支持本地querySelectorAll()的浏览器中慢得多（所有当前浏览器都有此支持）。关于api.jquery.com的:gt()选择器页面有note。

支持querySelectorAll()的IE8不支持

:nth-child()，因此IE8中的:nth-child()也可能更慢。