javascript - jquery - dom 要素を参照する変数とセレクターを混在させる

Question

私は通常、次のように頻繁に再利用される DOM 要素の変数を作成します。

var $dom_element = $('#dom_element);

これは私のセットアップです：

<div id="dom_element">
  <div class="child_element">
  <div class="child_element">
</div>

私が疑問に思っているのは、この変数をサブセレクターと組み合わせて子要素を取得できるかどうかです。私はそれが次のようなものになると思います：

var $child_element = $($dom_element + ' .child_element);

もしそうなら、これを行うことと、単に言うだけで速度の利点はありますか?

$('.child_element);

これらの要素の両方が大規模なサイトに深くネストされている可能性があるという事実を考慮していますか?

score 4 · Accepted Answer

と

var $dom_element = $('#dom_element);

子要素を取得するために以下を使用します

var $child_element = $dom_element.find(".child_element");//I prefer this one, it is easier to read.

また

var $child_element = $(".child_element", $dom_element);

私の調査/読書から、要素を変数に設定することは、それを何度も参照する場合に最適であるように思われます。そうすれば、jQueryはDOMを何度も検索する必要がありません。

score 0 · Accepted Answer

セレクターに関しては、裸のクラスを子セレクターとして使用すると、問題が発生する可能性があります。同じクラスを使用する複数の子ノードがある場合はどうなりますか?

.find() は、他の人が示唆しているように機能します。代わりに .children() を使用することもできます:

var $kids = $dom_element.children('.child_element');

.find() と .children() の違いは、.children() は DOM ツリーの 1 レベル下のみを検索することです。.find() は、可能なすべての子ノードを再帰的に実行して、セレクターに一致させます。

2 に答える 2