jquery选择nth-child之后的所有孩子

Question

我正在使用jquery并创建show hide列表，我需要隐藏ul中第6个孩子后面的所有子列表项。通常我会通过设置高度，然后点击一下点击更改高度来做到这一点，但为了实现这一点，我需要将overflow:hidden添加到我的CSS中，这不是一个选项。

我如何获得大于第7个孩子的所有子列表元素？

类似的东西，

$("ul li:6n").domeSomething()

Answer 1

  

我如何获得大于第7个孩子的所有子列表元素？

选择元素index = 7 +

$("ul li:gt(6)").domeSomething()

:gt selector

选择器使用零基础索引：

  

请注意，由于JavaScript数组使用基于0的索引，因此这些选择器反映了这一事实。这就是为什么$（'。myclass：gt（1）'）选择带有类myclass的文档中第二个元素之后的元素，而不是第一个之后的元素。相反，：nth-​​child（n）使用基于1的索引来符合CSS规范。

Answer 2

我想写我的答案只是为了讨论以前的两个答案：来自 gdoron 的the answer和来自 neu-rah 的the answer。如果我们看到投票数，我们可以看到大多数读者更好地找到了doron的答案。我不同意，我试图解释原因。

您将找到:gt()选择器文档的说明（请参阅“附加说明：”here）：

  

因为:gt()是jQuery扩展而不是CSS的一部分   规范，使用:gt()的查询无法利用   本机DOM提供的性能提升querySelectorAll()   方法。要在现代浏览器中获得更好的性能，请使   而是$("your-pure-css-selector").slice(index)。

您可以使用here或更好here（使用jQuery 1.7.2的非最小化代码）测试代码。代码只使用语句$("ul li:gt(6)").css("color", "red");。如果您使用激活按钮“暂停异常”在Chrome的开发人员工具中启动演示，则可以更好地了解此问题。您将看到以下异常（它不是第一个异常）：

因此，您可以看到jQuery的当前实现尝试使用Web浏览器的 native querySelectorAll()来获得最佳性能。之后，函数$.makeArray将用于从NodeList创建jQuery包装器。如果发生异常the line

return oldSizzle(query, context, extra, seed);

如果您使用querySelectorAll()支持的选择器，那么您将获得最佳性能。例如

$("ul li").slice(7)

更好

$("ul li:gt(6)")

我建议您尽可能使用更精确的选择器。例如，如果父<ul>元素有id="menu1"，那么您可以使用

$("#menu1 >li").slice(7)

获得最佳效果。如果您的网页上有多个 <ul>元素，它还会有所帮助。

有人可以提到：选择器"ul li:gt(6)"运行得足够快。这是正确的，但你不应该忘记，你在循环中使用某些时间选择器或在循环内部调用的函数内部使用它。因此，如果执行时间将乘以100，则10ms和30ms之间的差异会更加明显。

此外，有人问自己如何实现某些选择并获得答案的问题，他/她将使用代码模式永久。我认为使用具有性能优势的模式会更好。不是这样。

更新：要清除$("ul li:gt(6)")，$("ul li").slice(7)和$("#menu1 >li").slice(7)选择器的效果差异，我另外the demo。每个人都可以测试他使用的网络浏览器的差异。您还应该忘记，如果页面中有许多其他元素，则id选择器将更好地工作。

在我的计算机上，$("ul li").slice(7)和$("#menu1 >li").slice(7)的执行时间大致相同（页面元素非常少），大约2.5-4.5倍为$("ul li:gt(6)")。结果可能取决于li项目的数量，页面上的元素数量以及许多其他内容，但我希望测试清楚地表明slice的使用与性能优势相比较:gt的用法（就像我们之前引用的jqGrid文档中读到的那样）。

Answer 3

使用切片减少一组

.slice(start[,end])

http://api.jquery.com/slice/

示例（已编辑）

$("ul li").slice(6).doSomething(...)

Answer 4

试试这个：

$('ul li:eq(6)').nextAll().domeSomething()