什麼是以下標記中最有效的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'); 

所有現代化的比斯克都有一個標籤緩存。

如果您在中div添加id到div尋找輸入：既然是最快的

$('#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結構給出不同的結果。