直接后代选择器大于

Question

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

此代码：

$("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()：

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

这与您的期望有很大不同。

您需要:nth-child()代替behaves more like what you expect of a CSS simple selector：

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

:nth-child(n+8)表示“从基于1索引的第8个孩子开始”，大致相当于:gt(6)，这意味着“从基于0索引的第7个匹配开始”（令人困惑） ， 我知道）。比较Selectors spec for :nth-child()，jQuery API documentation for :gt()和jQuery API documentation for .slice()。