jquery - 大于的直接后代选择器

Question

我需要选择计数大于七的所有无序列表中的所有列表项。

这段代码：

$("ul.seven > li:gt(6)").hide()

过于贪婪并且对于页面上的第一个无序列表可以正常工作，但隐藏了后续无序列表的所有后续列表项。什么是正确的选择器？

Answer 1

试试这个

$("ul.seven").each(function() {
    $(this).find("> li:gt(6)").hide();
});

或（本质上是一样的）

$("ul.seven").each(function() {
    $(this).children("li:gt(6)").hide();
});

Answer 2

:gt()整理整个集合ul.seven > li并选择该组合集合中第六个之后的所有内容li，无论其父对象如何。这相当于选择所有这些li元素，然后.slice()对结果集执行 a：

$("ul.seven > li").slice(7).hide();

这与您的期望完全不同。

:nth-child()相反，您想要，它的行为更像您对 CSS 简单选择器的期望：

$("ul.seven > li:nth-child(n+8)").hide();

:nth-child(n+8) means "starting from the 8th child based on a 1-index", which is roughly equivalent to :gt(6) which means "starting from the 7th match based on a 0-index" (confusing, I know). Compare the Selectors spec for :nth-child(), the jQuery API documentation for :gt() and the jQuery API documentation for .slice().