:nth擬似クラスの定義は何ですか?
jQuery や CSS のドキュメントは見つかりませんが、存在するようです:
var $list = $('<ul><li>1</li><li>2</li><li>3</li></ul>');
$list.find('li:nth(2)').text();
戻り値: "3",
その間：
$list.find('li:nth-of-type(2)').text();
$list.find('li:nth-child(2)').text();
両方とも戻る"2"
この疑似クラスは何ですか？誰かがそれに関するドキュメントを教えてもらえますか?
:nth()他の回答とは対照的に、CSS 疑似クラス セレクターではありません。
これは、 Sizzle エンジンで使用されるあまり知られていないポジショナル セレクターです。
:nth:nthページ上の要素を検索します。
上記の定義は、Sizzle の Github ドキュメントにあります。
nth()および他のセレクターが異なる要素を選択する理由はnth()、CSS セレクターが1 から始まるインデックス セレクターであるのに対し、 は 0から始まるインデックスセレクターだからです。
andnth()などの同様の名前の CSS 疑似クラス セレクターと何らかの一貫性を保つとほとんどの人が想定しているため、これがいかに混乱を招く可能性があるかは理解できますが、前述のように、これらは実際には関連していません。 nth-child()nth-of-type()
はい。実際、nth() は eq() とまったく同じように見えます:
Expr.pseudos["nth"] = Expr.pseudos["eq"];
この古いメーリング リストの会話(2007 年) は、John Resig が:nth()理由でセレクターを削除することを計画していたことを示唆しています。
「グループを検索しましたが、これに関する関連する話が見つからないようです。あるとすれば、との使用の違いは何
:eq(n)ですか:nth(n)?どちらかで標準化を開始する前に知りたいです。ありがとうございます。 ." - マット・ペナー「それらは同じなので、好きな方を使用できます。jquery.js から:
nth: "m[3]-0==i",eq: "m[3]-0==i"」- Karl Swedberg「ふぅ……多分、核出すべきだな
:nth()」- ジョン・レシグ
しかし、お気づきのように、:nth()セレクターの削除は実現しませんでした (とにかく 2013 年の時点で)。
HTML:
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
jQuery:
$('p:nth(2)').text(); // Returns 3 as zero-based index.
$('p:eq(2)').text(); // Returns 3 as zero-based index.
$('p:nth-child(2)').text(); // Returns 2 as one-based index.
$('p:nth-of-type(2)').text(); // Returns 2 as one-based index.