jQuery屬性選擇器其中值包含數組中的值

我有一堆帶有屬性的列表項。我一次只想選擇其中的兩個或三個。目前我split荷蘭國際集團以逗號分隔的編號，然後選擇創建一個數組，jQuery的返回的列表：jQuery屬性選擇器其中值包含數組中的值

var ids = $(this).text().split(','); //e.g. text = 1,13,27 
var selectors = []; 
for (var index in ids) 
{ 
    selectors.push('.container ul.class li[data-id="'+ids[index]+'"]'); 
} 
$(selectors.join(',')).addClass('active');

這似乎是Firefox的一個相當昂貴的方法。有沒有一種方法來優化這個，所以我可以選擇包含任何id的data-id屬性的任何li？

類似於下面的內容，但選擇任何值？

var ids = $(this).text().split(','); //e.g. text = 1,13,27 
$('.container ul.class li[data-id~="' + ids + '"]').addClass('active');

[編輯]

由於@Alnitak的評論我已經改變了我的循環來：

var ids= $(this).text().split(','); 
var length = ids.length; 
for (var i=0; i<length;i++) 
{ 
    selectors.push('.container ul.class li[data-id="'+ids[i]+'"]'); 
}

這帶來了一個很大的進步，但沒有任何更多的我能做什麼？

來源

2013-06-24 Richard Parnaby-King

不使用'對... in'陣列上 - 這是枚舉_object keys_，不_array indices_。 – Alnitak

謝謝。我改變了'for ... in'中的for for（var i = 0; i

如何：

var ids = "21,5,6,7,10".split(","); 

// selector produced: [data-id='21'],[data-id='5'],[data-id='6'],[data-id='7'],[data-id='10'] 
$("[data-id='" + ids.join("'],[data-id='") + "']").addClass("active");

http://jsfiddle.net/3MNDy/

來源

2013-06-24 11:28:57 karim79

這給了我最好的性能改進。我已經改變了選擇器以包含div類和ul類：'var selector ='.container ul.class li [data-id =''; $（selector + ids.join（'「]'+ selector）+ '']'）。addClass（'active'）;' –

@ RichardParnaby-King_這給了我最好的性能改進。我不這麼認爲，根據哪個標準？ – undefined

var ids = $(this).text().split(','); 

$.each(ids, function(k, v){ 
    $('.container ul.class li[data-id="' + v + '"]').addClass('active'); 
});

來源

2013-06-24 11:26:15 Spokey

我試過這個。它確實有效，但我試圖優化這個腳本，儘可能少的dom調用/更新（在問題中沒有解釋但應該是）。這就是爲什麼我要創建一個選擇器數組並在循環結束時執行一個dom更新的原因。 –

您可以使用filter方法：

$('.container ul.class li').filter(function() { 
    return ids.indexOf($(this).data('id')) > -1; 
}).addClass('active');

來源

2013-06-24 11:26:56 undefined

+1即使我知道它的冗餘但老版本的IE不支持indexOf數組的方法 –

@roasted是的，對於_IE_而言是這樣的，可以使用jQuery的'$ .inArray'來代替。 – undefined

它應該是更高性能的基於屬性的值來選擇都帶着data-id屬性的元素一次，然後篩選列表：

var $matches = $('.container ul.class li[data-id]').filter(function() { 
    return $.inArray(this.getAttribute("data-id"), ids); 
}); 

$matches.addClass('active'); // or whatever else you want to do

來源

2013-06-24 11:27:04 Jon

ID數組正在轉換爲字符串'[「1」，「13」，「27」]'，我認爲'$ .inArray'也是強制檢查，所以總是返回-1。 –

@ RichardParnaby-King：'getAttribute'的返回值是一個字符串，'ids'中的值也是。我不明白爲什麼這會返回-1。 – Jon

我認爲這將是更優化的方法：

var ids = $(this).text().split(','); //e.g. text = 1,13,27 
var lis = $('.container ul.class li'); 
lis.filter(function() { 
    return $.inArray($(this).data('id'), ids); 
}).addClass('active');

來源

2013-06-24 11:30:22 Nelson

jQuery屬性選擇器其中值包含數組中的值

回答

相關問題