jquery - 大なりの直系子孫セレクター

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の6番目以降のすべてを選択します。liこれは、これらのli要素をすべて選択して.slice()から、結果セットに対してを実行するのと同じです。

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

これはあなたが期待するものとは非常に異なることをします。

:nth-child()代わりに、CSSの単純なセレクターに期待するもののように動作するものが必要です。

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

:nth-child(n+8)「1インデックスに基づいて8番目の子から開始する」を意味します。これは、:gt(6)「0インデックスに基づいて7番目の一致から開始する」という意味とほぼ同じです（紛らわしいですが）。のセレクター仕様:nth-child()、のjQuery APIドキュメント、:gt()およびのjQueryAPI.slice()ドキュメントを比較します。