web-dev-qa-db-ja.com

jqueryの検索とコンテキストの選択

次のhtmlスニペットがある

<div class="something">
    <p>Some text</p>
</div>
<div class="somethingElse">
    <p>some other text</p>
</div>

次のjqueryスニペットは同一だと思います（同じ結果になります）：

$(".something").find("p").css("border", "1px solid red");

$("p", ".something").css("border", "1px solid red");

私の質問は、一方のスニペットがもう一方よりも優れており、使用する必要があるかどうかです。

jqueryjquery-selectors
47
harpax

呼び出しは同一ではありません。

どうやらjQueryに取り組んだBrandonAaronによると、またライブテストによると ここ 、findメソッドは常に高速です。以下のスクリーンショットの結果を参照してください。何か足りないものがあればコメントしてください。

ブラウザによって速度に10％以上の違いがあるため、findを使用する価値があるようです。

Brandonのサイトでの詳細な説明は ここ です。

Results of performance comparison between jQuery context and jQuery find method

63
BrianFinkel

両方の呼び出しは同一です。後者の呼び出しは前者の呼び出しに変換されます。翻訳手順を省略したい場合は、前者を使用してください。

22
Gumbo

contextフォームを使用することが望ましい1つのユースケースを考えることができます-コンテキストがnullの可能性がある変数に含まれている場合です。

例えば：

_// Only affect matching items that are descendants of '#parent'
do_something( $( '#parent' ) );
// Affect all matching items
do_something();

function do_something( $parent_element ){
  $( '.child', $parent_element ).each( function(){ } );
}
_

2回目にdo_something()が呼び出された場合、$parent_element.find()を使用した場合は失敗しますが、この例では、_$parent_element_が未定義または空の場合、コンテキストはnullであるため、 ：ドキュメント全体。

確かにこれはエッジケースですが、私が取り組んでいたもので出てきたので、後世のためにここに置いておきたいと思いました。

10
Tom Auger

検索は40％優れています：

http://jsperf.com/jquery-find-vs-context-2/1

違いに注意してください：

$myDiv = $("myDiv")
myDiv = "#myDiv"

jQuery要素である$myDivをコンテキストとして渡すと、$。findよりも約10％遅くなります。 jQueryセレクターである#myDivをコンテキストとして渡すと、$。findよりも40％遅くなります。

$ .find>コンテキスト。

7
dylanjha