jQuery attribute selector where value contains value in array

Question

I have a bunch of list items with an attribute. I want to select only two or three of these at a time. Currently I am spliting a comma-separated list of ids then creating an array of selectors for jQuery to return:

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

This appears to be quite an expensive approach for Firefox. Is there a way to optimise this so I can select any li with the data-id attribute containing any of the ids?

Something similar to the below, but selecting any of the values?

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

[edit]

Thanks to @Alnitak's comment I have changed my loops to:

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

This has delivered a big improvement, but is there any more I can do?

don't use for ... in on arrays - it's for enumerating object keys, not array indices. — Alnitak
– Alnitak, Commented Jun 24, 2013 at 11:23
Thanks. I have changed the for ... in for for(var i = 0; i < length; i++). This has delivered a big improvement, but is there any more I can do? — Richard Parnaby-King
– Richard Parnaby-King, Commented Jun 24, 2013 at 11:26

karim79 · Accepted Answer · 2013-06-24 11:28:57Z

15

How about:

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/

answered Jun 24, 2013 at 11:28

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Richard Parnaby-King Over a year ago

This has given me the best performance improvement. I've altered the selector to include the div class and ul class: var selector = '.container ul.class li[data-id="'; $(selector + ids.join('"]' + selector) + '"]').addClass('active');

Ram Over a year ago

@RichardParnaby-King This has given me the best performance improvement. I don't think so, based on which criterion?

Ram · Accepted Answer · 2013-06-24 11:26:56Z

10

You can use filter method:

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

answered Jun 24, 2013 at 11:26

Ram

145k16 gold badges174 silver badges201 bronze badges

2 Comments

A. Wolff Over a year ago

+1 even i know its redundant but older version of IE don't support indexOf method for arrays

Ram Over a year ago

@roasted Yes, that's true, for IE jQuery's $.inArray can be used instead.

Spokey · Accepted Answer · 2013-06-24 11:26:15Z

4

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

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

answered Jun 24, 2013 at 11:26

Spokey

11k2 gold badges31 silver badges44 bronze badges

1 Comment

Richard Parnaby-King Over a year ago

I've tried this. It does work, but I'm trying to optimise this script to make as few dom calls/updates as possible (not explained in the question but should be). Which is why I'm creating an array of selectors and doing the one dom update at the end of the loop.

Jon · Accepted Answer · 2013-06-24 11:27:04Z

1

It should be more performant to select all the elements with a data-id attribute once, then filter that list based on the value of the attribute:

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

answered Jun 24, 2013 at 11:27

Jon

439k85 gold badges756 silver badges820 bronze badges

2 Comments

Richard Parnaby-King Over a year ago

The array of ids is being converted into strings ["1","13","27"] and I think $.inArray is cast checking as well so is always returning -1.

Jon Over a year ago

@RichardParnaby-King: The return value of getAttribute is a string and so are the values in ids. I don't see why this would return -1.

Nelson Benítez León · Accepted Answer · 2013-06-24 11:30:22Z

0

I think this will be more optimized approach:

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

answered Jun 24, 2013 at 11:30

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

Collectives™ on Stack Overflow

jQuery attribute selector where value contains value in array

5 Answers 5

2 Comments

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related