イベントとDOM反復の連結

Question

以下、2つのjQueryセレクタがあります。

最初にキャッシュされたオブジェクト内のDOM要素を検索し、その親を検索した後、別のDOM要素の親（表）を検索します。 （例2）

2番目（2行目）は、キャッシュされた要素で検索します。 （例1） 1が高速/ベストプラクティスです

$('element', table.setting.body).on('blur focus', table.focus).parents('parent').find('another element').on('click', function); // ex2 

    $('element', table.setting.body).on('blur focus', function); // ex 1 
    $('another element', table.setting.body).on('click', function); // ex 1 

？
Ex。 1は間違いなく、jQuery関数、すなわち、 .hide().animate().show()しかし、DOM要素を検索するときはいつですか？

Answer 1

table.setting.bodyの異なる子孫を照合し、table.setting.bodyを2回指定することなく、これらの子孫に対して異なるタスクを実行しようとしているようです。

これを実現するにはend()を使用できます。 table.setting.bodyはjQueryオブジェクトがある場合たとえば、あなたが書くことができます。

table.setting.body.find("element").on("blur focus", function).end() 
        .find("another element").on("click", function); 

（table.setting.bodyは、DOM要素がある場合は、まずそれに$()を適用する必要があります）。

のみ（私の経験でcontext引数で$()へのあなたの通話よりも若干速い）find()を2回呼び出し、2つのon()への呼び出し（あなたと同じ）と単一の呼び出しを行い、一度キャッシュされたオブジェクトを評価し、上記のコードend()（これはスタックからアイテムをポップするだけであり、非常に速いはずです）。

Answer 2

私が見る唯一の違いは、あなたの最初のアプローチの内側の両親の使用です。 jQuery.parents機能のディレクトリ内のループを使用して必要な親を探します：

parents: function(elem) { 
    return jQuery.dir(elem, "parentNode"); 
}, 

// ... 

dir: function(elem, dir, until) { 
    var matched = [], 
     cur = elem[ dir ]; 

    while (cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery(cur).is(until))) { 
     if (cur.nodeType === 1) { 
      matched.push(cur); 
     } 
     cur = cur[dir]; 
    } 
    return matched; 
}, 

（http://code.jquery.com/jquery-1.8.2.js）

cur = elem[ dir ]はelem["parentNode"]を意味し、 untilは定義されていないので、すべての親に対して繰り返されます。希望の親が参照として与えられている場合は、ショートカットはありません。

探している最初の要素とドキュメントのルートの間のパスの長さに応じて、最初の方法ではさらに多くのDOM操作が必要です。

したがって、2番目の方法をお勧めします。

Answer 3

私の意見では、これは速度の問題ではなく、保守性と優れたコーディングスタイルの問題です。

そして、実施例1は、混乱を避けるため、分離物事を保つ

例2よりもはるかに優れているところです。あなたは、2つの異なる要素 - 書き込み2ステートメントに2つのイベントを添付したいと考えています。これにより、コードははるかに構造化され、読みやすくなります。