选择除第一个之外的所有子元素

Posted 2023-05-08

【中文标题】选择除第一个之外的所有子元素

【英文标题】：Select all child elements except the first

【发布时间】：2010-09-15 18:11:24

【问题描述】：

假设我有以下内容：

<ul>
 <li>First item</li>
 <li>Second item</li>
 <li>Third item</li>
</ul>

如何使用 jQuery 选择第一个子元素之后的所有子元素？所以我可以实现以下目标：

<ul>
 <li>First item</li>
 <li class="something">Second item</li>
 <li class="something">Third item</li>
</ul>

【参考方案1】：

您应该能够使用“not”和“first child”选择器。

$("li:not(:first-child)").addClass("something");

http://docs.jquery.com/Selectors/not

http://docs.jquery.com/Selectors/firstChild

【讨论】：

我试过这个：$('.certificateList input:checkbox :not(:first-child)') 但它没有用....

这会比下面列出的 Slice 方法慢吗？

【参考方案2】：

根据我对这里四种方法的完全不科学的分析，看起来它们之间的速度差异并不大。我在包含一系列不同长度的无序列表的页面上运行每一个，并使用 Firebug 分析器对它们进行计时。

$("li").slice(1).addClass("something");

平均时间：5.322ms

$("li:gt(0)").addClass("something");

平均时间：5.590 毫秒

$("li:not(:first-child)").addClass("something");

平均时间：6.084 毫秒

$("ul li+li").addClass("something");

平均时间：7.831 毫秒

【讨论】：

我遇到了这个问题，因为我需要得到除第一个之外的所有孩子。我正在对 div 中的所有 h3 执行此操作。我在我的页面上运行了您上面提到的三个查询，结果 :not(:first-child) 是最快的 2-3 倍。我认为您的页面结构方式也可能影响配置文件速度。不管怎样，虽然这个答案教会了我如何使用 Firebug 分析器，但我感谢你。

【参考方案3】：

http://docs.jquery.com/Traversing/slice

$("li").slice(1).addClass("something");

【讨论】：

这是一个不错的答案，但我觉得我选择的答案是更明确的用法。任何刚接触该项目的人都可以更快地掌握选择器中正在执行的操作。

【参考方案4】：

更优雅的查询（选择所有以 li 元素开头的 li 元素）：

$('ul li+li')

【讨论】：

$("li+li") 可能会比 $("li:not(:first-child)") 工作得更快

【参考方案5】：

这应该可以工作

$('ul :not(:first-child)').addClass('something');

【参考方案6】：

我会用

$("li:gt(0)").addClass("something");

【参考方案7】：

这就是我目前所做的工作

$('.certificateList input:checkbox:gt(0)')

【参考方案8】：

使用 jQuery .not() 方法

$('li').not(':first').addClass('something');

或

var firstElement = $('li').first();
$('li').not(firstElement).addClass('something');