jquery - eq と n 番目の子の DOM 検索

Question

私のブラウザでテストしたところ、eq は DOM ツリーを上から下に検索し、最初の要素を見つけた後に停止するようです。

一方、nth-child は DOM ツリー全体を上から下に検索し、途中で関連するすべての要素をターゲットにします。

例：

$('div').children('p:nth-child(2)').css('color', 'red')

$('div').children('p').eq(3).text('text edited with (eq)');

要素が見つかったら、eq は実際に DOM 検索を停止しますか?

Answer 1

どちらの場合も、最初に DOM 全体で DIV が検索されます。

最初のケースでは、これらの DIV の 3 番目の子が P であるかどうかがチェックされます。これは、3 番目の段落ではなく 3 番目の子を探しているため、非常に短い検索です。したがって、要素の種類に関係なく、指定された n 番目の子の後に停止します。これ以上検索する必要がないためです。

2 番目のケースでは、クエリはすべての P (これらの DIV の子) を検索し、そのサブセットを検索して 3 番目の段落があるかどうかを確認します。したがって、この場合、最初にすべての P を見つけてから削り取るため、3 番目の P で停止しません。