我正在使用 jquery 并创建显示隐藏列表，我需要隐藏 ul 中第 6 个孩子之后的所有子列表项。通常我会通过设置高度然后在单击时更改高度来做到这一点，但是为了使其工作，我需要添加overflow:hidden到我的 css 中，这不是一个选项。
如何获得大于第 7 个孩子的所有子列表元素？
就像是，
$("ul li:6n").domeSomething()
问问题
8912 次
4 回答
16
如何获得大于第 7 个孩子的所有子列表元素？
选择元素索引 = 7+
$("ul li:gt(6)").domeSomething()
选择器使用零基索引：
请注意，由于 JavaScript 数组使用从 0 开始的索引，因此这些选择器反映了这一事实。这就是为什么 $('.myclass:gt(1)') 选择文档中类 myclass 的第二个元素之后的元素，而不是选择第一个之后的元素。相反， :nth-child(n) 使用基于 1 的索引来符合 CSS 规范。
于 2012-06-10T08:23:44.497 回答
3
我想写我的答案只是为了讨论之前的两个答案：来自gdoron的答案和来自neu -rah的答案。如果我们在投票计数上看到，大多数读者会发现 doron 的答案更好。我不同意，我试图解释原因。
您将找到 Selector 文档的说明（请参阅此处:gt()的“附加说明：” ）：
因为
:gt()是 jQuery 扩展而不是 CSS 规范的一部分，所以使用的查询:gt()不能利用原生 DOMquerySelectorAll()方法提供的性能提升。为了在现代浏览器中获得更好的性能，请$("your-pure-css-selector").slice(index)改用。
您可以使用此处或更好的此处测试代码（使用 jQuery 1.7.2 的非最小化代码）。该代码仅使用语句$("ul li:gt(6)").css("color", "red");。如果您在 Chrome 的开发者工具中使用激活的按钮“Pause on exceptions”启动演示，您将更好地理解该问题。您将看到以下异常（它不会是第一个）：
所以你可以看到，当前的 jQuery 实现尝试使用web 浏览器的native querySelectorAll()来获得最佳性能。之后，函数$.makeArray将用于从NodeList. 如果出现异常，该行
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)差异。每个人都可以测试他使用的网络浏览器的差异。您还不应忘记，如果页面有许多其他元素，则 id 选择器会更好地工作。$("#menu1 >li").slice(7)
$("ul li").slice(7)在我的计算机上，和的执行时间$("#menu1 >li").slice(7)大致相同（页面元素很少），并且比for好 2.5-4.5 倍$("ul li:gt(6)")。结果可能取决于li项目数、页面上的元素数和许多其他东西，但我希望测试能清楚地表明，与使用slice相比，使用具有性能优势:gt（就像我们可以阅读之前引用的 jqGrid 文档）。
于 2012-06-10T10:33:15.090 回答
2
使用 slice 减少集合
.slice(start[,end])
示例（已编辑）
$("ul li").slice(6).doSomething(...)
于 2012-06-10T08:25:09.733 回答
1
尝试这个：
$('ul li:eq(6)').nextAll().domeSomething()
于 2012-06-10T08:25:06.193 回答