jQuery-Attributselektor, wobei Wert im Array

Question

enthält Ich habe eine Reihe von Listenelementen mit einem Attribut. Ich möchte nur zwei oder drei davon gleichzeitig auswählen. Derzeit bin ich split eine durch Kommata getrennte Liste von Ids ing dann einen Array von Selektoren zu schaffen für jQuery zurückzukehren:

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'); 

Diese recht teuer Ansatz für Firefox zu sein scheint. Gibt es eine Möglichkeit, dies zu optimieren, so dass ich eine li mit dem Daten-ID-Attribut auswählen kann, das eine der IDs enthält?

Etwas ähnlich wie unten, aber die Auswahl eines der Werte?

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

[Bearbeiten]

Dank @Alnitak ‚s Kommentar Ich habe meine Schleifen geändert:

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]+'"]'); 
} 

dies eine große Verbesserung geliefert hat, aber gibt es nicht mehr was ich tun kann?

Answer 1

Wie wäre:

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/

Answer 2

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

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

Answer 3

können Sie filter Methode verwenden:

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

Answer 4

Es sollte mehr performant sein, alle mit einem data-id Attribut um die Elemente auszuwählen einmal, dann filtern die Liste basierend auf dem Wert des Attributs:

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 

Answer 5

Ich denke, das optimierteren Ansatz sein:

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');