330

jQuery で子ノードを選択するには、children() だけでなく find() も使用できます。

例えば：

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

次と同じ結果が得られます。

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

では、どのオプションが最速または優先され、その理由は?

4

7 に答える 7

427

children()ノードの直下の子のみを調べ、ノードのfind()下の DOM 全体をトラバースするため、同等の実装を考えると高速になるchildren() はずです。ただし、ブラウザで解釈されるJavaScriptfind()を使用しながら、ネイティブブラウザ メソッドをchildren()使用します。私の実験では、典型的なケースではパフォーマンスに大きな違いはありません。

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

于 2009-03-15T15:47:44.843 に答える
181

このjsPerfテストは、find（）の方が高速であることを示しています。より徹底的なテストを作成しましたが、それでもfind（）がchildren（）よりも優れているように見えます。

更新： tvanfossonのコメントに従って、16レベルのネストを使用して別のテストケースを作成しました。find（）は、可能なすべてのdivを検索する場合にのみ遅くなりますが、最初のレベルのdivを選択する場合は、find（）の方がchildren（）よりも優れています。

ネストのレベルが100を超え、find（）がトラバースするdivが約4000以上になると、children（）はfind（）よりもパフォーマンスが向上し始めます。これは基本的なテストケースですが、ほとんどの場合、find（）はchildren（）よりも高速だと思います。

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

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

于 2011-10-07T20:11:23.363 に答える
25

これらは必ずしも同じ結果をもたらすとは限りませfind()ん。子孫ノードを取得しますが、一致する直接の子children()のみを取得します。

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

于 2009-03-15T15:49:26.540 に答える
3

find()メソッドとメソッドの両方をchildren()使用して、一致した要素の子をフィルター処理します。ただし、前者は任意のレベルを下に移動し、後者は 1 レベル下に移動します。

単純化するには:

  1. find()– 一致した要素の子、孫、ひ孫をすべて下のレベルで検索します。
  2. children()– 一致した要素の子のみを検索します (シングル レベル ダウン)。
于 2015-05-04T12:12:34.517 に答える