2009-03-15 6 views
279

jQueryで子ノードを選択するには、children()だけでなくfind()も使用できます。例えばjQueryで最も速いchildren()またはfind()とは何ですか?

:今

$(this).find('.foo');

、オプションが最速または好ましく、その理由です:

$(this).children('.foo');

は、同じ結果を与えますか? find()は、ノードの下全体のDOMを横断するので、children()速く同等の実装を与えられるべきである一方で

+21

'.find()'と '.children()'は同じではありません。後者は、子セレクタのように、DOMツリーの1つのレベルを移動するだけです。 – Timothy003

+1

@ Timothy003あなたはそれが間違っていると述べました。前者は後者ではなく、一レベル下に移動します。 –

+2

@DipeshRanaティモシー2003の独自の文に適用される「後者」です。 –

答えて

369

children()は、ノードの直接の子に見えます。ただし、find()ネイティブブラウザメソッドを使用し、children()JavaScriptをブラウザで使用します。私の実験では、典型的なケースではパフォーマンスの差はあまりありません。

どちらを使用するかは、直下の子孫またはその下のすべてのノード(DOM内のすべてのノード)を考慮するかどうか、つまりメソッドの速度ではなく、結果に基づいて適切な方法を選択するかどうかによって決まります。パフォーマンスが本当に問題である場合は、最適なソリューションを見つけてそれを使用してテストしてください(または他の回答のベンチマークの一部を参照してください)。

+8

確かに、親要素に子ノードしかない場合はどうなりますか?私はこれについていくつかのプロファイリングを行うつもりです。 – jason

+3

@ jason:あなたのプロファイリングの何かがこれまでにありましたか? –

+10

子どもと子どものパフォーマンスはブラウザによって異なりますが、DOMサブツリーがどの程度複雑であるかによって異なります。最近のブラウザーでは、find()は内部的にquerySelectorAllを使用しています。これは複雑なセレクターや小規模から中位のDOMサブツリーのchildren()よりも優れています。 – LeJared

23

これらは必ずしも同じ結果得られません:children()だけあなたにマッチし直接の子を取得するのに対しfind()は、あなたにどんな子孫ノードを取得しますが。

ある時点で、find()は、すべての子孫ノードを検索する必要があったため、一致する可能性のある子ノードだけでなく、かなり遅くなりました。しかし、これはもはや真実ではありません。 find()は、ネイティブブラウザメソッドを使用するため、はるかに高速です。

+1

に従っていないhaha :p。非常に非常に大きなDOMツリーがある場合のみ。 – camou

+1

@Camouこの回答は4歳です。 'find()'は当時はずっと遅かったです! –

+0

@camouはパフォーマンスパートは「他の回答によるものではない」と言っています。この答えの最初の段落は正確です。 – mmcrae

164

このjsPerf testは、find()が高速であることを示しています。私はmore thorough testを作成し、find()がchildren()よりも優れているかのように見えます。

更新: tvanfossonのコメントによると、私は012レベルのネストを持つanother test caseを作成しました。 find()は可能なすべてのdivを見つけるときだけ遅くなりますが、find()はdivの最初のレベルを選択するときにchildren()よりも優れています。

children()は、ネスティングが100以上あり、find()が4000回以上実行されているときにfind()より優れています。初歩的なテストケースですが、find()はほとんどの場合children()よりも高速です。

ChromeデベロッパーツールでjQueryコードを実行し、children()が内部的にsibling()、filter()を呼び出し、find()よりもいくつかの正規表現を使用していることに気付きました。

find()とchildren()は異なるニーズを満たしますが、find()とchildren()が同じ結果を出力する場合はfind()を使用することをお勧めします。

+4

子供たちはdom traversalメソッドを使い、セレクタapiを使うのが速いようです。 – topek

+4

ネストのレベルが1つしかないので、かなり縮退したテストケースです。一般的なケースを望むならば、find()がchildren()よりも深いツリーをたどるので、任意の入れ子の深さを設定し、パフォーマンスをチェックする必要があります。 – tvanfosson

+0

特定の単一の子要素(例:event.target)が特定のdom要素(例えば。$( '。navbar'))にあるかどうかを確認する場合、$ .contains(this、event.target)最も速い(8,433,609 /秒対最も速いjquery検索のための140k)。 http://jsperf.com/child-is-in-parent – felix

83

ここには実行可能なパフォーマンステストがあるa linkがあります。 find()は実際にはchildren()より約2倍高速です。親要素の直接の子のためののみ検索へ.children()または.find(">")を使用した場合について述べ、他の回答の

Chrome on OSX10.7.6

+0

$ .contains(document.getElementById( 'list')、$( '。テスト ')[0])は8,433,609 /秒です。あなたが特定の要素を持っていて、BがAであるかどうかを知りたければ、これが最適です。 http://jsperf.com/child-is-in-parent – felix

+0

ニーステスト。 'var $ test = $ list.find( '。test');' $ listはjQueryオブジェクトです。 http://jsperf.com/jquery-selectors-context/101 –

12

なし。だから、私はjsPerf test to find outを作成し、3つの異なる方法で子供を区別しました。

余分な ">"セレクタを使用しても、.find()はまだロットより速く、.children()より速いです。私のシステムでは、10倍だから。

私の見解では、.children()というフィルタリングメカニズムを使用する理由はあまりありません。

+2

このコメントありがとう!私はjQueryが.chindren(x)を.find( ">" + x)のエイリアスにすることに変えるべきかどうか疑問に思っています。 –

+1

これは最も適切な比較のようです。ありがとう! – GollyJer

2

両方find()children()方法は、マッチした要素の子をフィルタリングするために使用され、前者を除いているが、任意のレベルを下る、後者は単一のレベルを下方移動します。

簡単にするために:

  1. find()を - ダウンマッチした要素の子を検索し、孫、ひ孫...すべてのレベル。
  2. children() - 一致する要素の子のみを検索します(1つ下のレベル)。
関連する問題