Question

我有一堆带有属性的列表项。我想一次只选择其中的两个或三个。目前我split以逗号分隔的id列表然后为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]+'"]');
}

这已经取得了很大的进步，但我还能做些什么吗？

Answer 1

怎么样：

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

您可以使用filter方法：

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

Answer 3

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

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

Answer 4

选择具有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

Answer 5

我认为这将是更优化的方法：

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

jQuery属性选择器，其中value包含数组中的值

5 个答案: