優化jQuery的過濾器獨特的元素

我有元素的集合，並且而每個有唯一的字符串標識，我不能放心地使用它的值作爲元素ID，因爲我不能保證它將只包含valid characters。因此，我將標識符存儲在每個元素jQuery .data()對象中。雖然我可以使用data-屬性，但我不太喜歡使用可能需要避免引號等選擇器的想法，但如果存在巨大的效率獎勵，則應將其考慮在內。使用.data()對象的解決方案也會很棒，因爲這可能適用於任何數據類型。優化jQuery的過濾器獨特的元素

我想知道選擇單個元素的最有效方法是什麼。目前，這是我的解決方案：

function get_group($from, group) { 
    var $result = $(); 
    $from.each(function() { 
    if($(this).data("group") == group) { 
     result = $(this); 
     return false; 
    } 
    }); 
    return $result; 
}

我遍歷每個結果，直到找到匹配。當我這樣做時，我會從循環中突圍。通過初始化$result作爲一個空的jQuery對象，我會永遠返回jQuery，我認爲這是最符合標準的做法，特別是.filter()方法。

我認爲這比使用.filter()帶有一個函數更好，因爲它明確地返回一個（或不是）項目，並在需要時立即停止迭代，但有沒有更好的方法？

來源

2013-08-06 Ian Clark

您是否動態創建這些元素？或者你有任何控制他們的創作和追加到頁面？ –

如果您的數據不包含引號（單或雙），爲什麼不使用數據組屬性？ –

這似乎是一個for環比你有一個更快：

function get_group ($from, group) 
    for (var i = 0; i < $from.length; i++) { 
     if ($($from[i]).data("group") == group) { 
      return $($from[i]); 
     } 
    } 
    return $(); 
}

JSPerf：http://jsperf.com/each-vs-data-selector

編輯：改寫爲功能，添加回報$（）

來源

2013-08-06 12:11:56

謝謝，但我沒有使用HTML5'data-'屬性，我使用jQuery'data（）'對象的屬性。然而，看着你的測試，這似乎是一個非常好的解決方案 - 你真的需要將'$ from [i]'包裝到jQuery中嗎？另外，如果完成循環失敗，則需要返回'$（）'。 –

是的，我知道你不是。我添加了測試，因爲一些答案表明這將是最快的解決方案。至於將'$ from [i]'包裝到jQuery中，這是必要的，因爲'$ from [i]'不是一個jQuery對象。我已經添加了一個使用'.eq（i）'的例子，但是那個比較慢。 –

嗯有趣，感謝您的意見！ :) –

正如你所說，如果每個數據組是唯一的，你可以做到這一點 -

$('[data-group="'+group+'"]')

來源

2013-08-06 11:14:31

我不喜歡這種方法作爲將未知字符串附加到jQuery選擇器似乎不明智（至少因爲引用問題） –

$from.find('[data-group="' + group + '"]')

來源

2013-08-06 11:16:14 Samy

我不喜歡這種方法作爲將未知字符串附加到jQuery選擇器不似乎很明智（尤其是因爲引用問題） –

同意，但這種方法使代碼緊湊和可讀，jQuery有一個故障安全機制，如果選擇器什麼都不匹配，它將返回一個空數組。如果給定的sting會破壞JS語法，則會出現問題。我猜這個決定取決於實際文本是由程序（相當安全）還是由用戶（可能不安全）提供。 – Samy

雖然優雅，但比簡單的循環慢了近60％。 –

優化jQuery的過濾器獨特的元素

回答

相關問題