次のマークアップで最も効率的なjQueryセレクターは何ですか？

Question

私は現在、対処しなければならない第三者のクライアント側の「マジックウィジェット」ライブラリを持っています。:)私が本当にやらなければならないことは、jQueryを使っていくつかの少量の動作を追加することですシンプルなビジネスルール。何度も、私は同じように多くの要素を選択しています。 「マジックウィジェット」はすでにJS上では非常に重いので、自分の高速マシンにも気付くことがあります。自分のJSを絶対最小限に抑えようとしていました。したがって、ユーザーが以下の入力のいずれかをクリックすると、jQueryを使用した次の構造で、クリックされた入力を含むすべての入力を選択する最も効率的な方法は何ですか？

<div> 
    <label><input ... /></label> 
    <label><input ... /></label> 
    <label><input ... /></label> 
</div> 

Answer 1

まず、あなたの入力をラベルで囲むべきではありませんが、これは別の引数です。

最速の方法は、おそらくです：

$('input').click(function(){ 
    var siblings = $(this).closest('div').find('input'); 
}); 

これはしかし、あまりにももう一度クリックし、入力を選択します。それが問題だ場合は、試してみてください。

$('input').click(function(){ 
    var siblings = $(this).closest('div').find('input').not($(this)); 
}); 

ラベル・タグは、各入力要素に先行するように、あなたが正しいマークアップを使用していた場合は、あなたのHTMLが

<div> 
    <label for="input1" /><input id="input1" ... /> 
    <label for="input2" /><input ... /> 
    <label for="input3" /><input ... /> 
</div> 

のようになります。そして、あなたのjQueryのコードが邪魔容易になります：

$('input').click(function(){ 
    var siblings = $(this).siblings('input'); 
}); 

Answer 2

$("div>label>input")と推定されます。各入力に共通のクラスを与えて$("input.class")を実行することもできますが。

Answer 3

さて、そのマークアップの要素のどれは、一意のidのか、クラス名を持っていないと仮定すると、あなたが使用できる最も効率的なセレクタがタグ名と>の組み合わせである、またはfirst-childセレクタ：

$("div > label > input"); 

Answer 4

です。マークアップのみよりもあなたの断片で構成されている場合：

$('input'); 

すべての近代的なbroswersは、タグへのキャッシュを持っています。

あなたはdivがdivにidを追加以内に入力を探している場合：それは最速であることから

$('#iput_fields > label > input'); 

idが重要です：このセレクタを

<div id="input_fields"> 
    <label><input ... /></label> 
    <label><input ... /></label> 
    <label><input ... /></label> 
</div> 

と使用ブラウザが実行できるクエリ。

Answer 5

親がなくてもタグ名を使用するよりもクラス名を使う方が良いと思われます。 Here is the test for it for test your self.

もっと複雑なHTML構造が異なる結果をもたらすかもしれません。