How to select same objects in two arrays using jQuery?

Question

I have a situation where I have two arrays of objects. I want select same objects from both arrays and show it. For instance I have following UL (You can see it at jsFiddle):

<ul>
<li id="one" class="color pro">one</li>
<li id="two" class="color pro">two</li>
<li id="three" class="color">three</li>
<li id="four" class="color">four</li>
</ul>

I am using following script to show same objects.

var activeElementsColors = $("ul li.color");
var activeElementsPro = $("ul li.pro");                             

var activeElements = activeElementsPro.filter(function(el) {  
return $.inArray(el, activeElementsColors) > -1;
});

activeElements.show();

I know I can use $("li.color.pro").show() but above one is just an example. real code is complex than this.

The $("ul li.color") will already give you both sets combined. — Ilia G
– Ilia G, Commented Dec 11, 2011 at 17:35

Rafay · Accepted Answer · 2011-12-11 17:38:20Z

2

var activeElementsColors = $("ul li.color");
var activeElementsPro = $("ul li.pro");                             

var activeElements = activeElementsPro.filter(function(el,e) {  

    return $.inArray(e, activeElementsColors) > -1;
});
console.log(activeElements);
activeElements.show();

http://jsfiddle.net/StPew/8/

answered Dec 11, 2011 at 17:38

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

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

3 Comments

Imran Subhani Over a year ago

I am wondering which one is more efficient. Your's or pimvdb's? btw both works fine for me ;)

Imran Subhani Over a year ago

also if I have more groups like for example: activeElementsColors, activeElementsPro, activeElementsType, activeElementsSize etc?

buddhabrot Over a year ago

I don't have the jQuery sources (and I doubt I'd be able to read them), but I suspect pimvdb's is more efficient really, because it skips a dereferencing that you usually woudn't program naively with an overload in an API. Profile it dpoing it a thousand times, get back with some numbers?

pimvdb · Accepted Answer · 2011-12-11 17:34:56Z

2

The first argument in the function passed to .filter is the index of the element in the jQuery object, not the element itself. Use this instead, which does refer to the element: http://jsfiddle.net/StPew/7/.

var activeElements = activeElementsPro.filter(function() {
    return $.inArray(this, activeElementsColors) > -1;
});

From the docs:

function(index)

A function used as a test for each element in the set. this is the current DOM element.

answered Dec 11, 2011 at 17:34

pimvdb

155k80 gold badges313 silver badges357 bronze badges

2 Comments

Imran Subhani Over a year ago

I am wondering which one is more efficient. Your's or 3nigma's? btw both works fine for me ;)

Rafay Over a year ago

i'll leave the explanation to @pimvdb :)

Ilia G · Accepted Answer · 2011-12-11 17:39:17Z

1

The parameter to the filter callback is the index of the current element. Use this instead.

return $.inArray(this, activeElementsColors) > -1;

That said what you doing seems seriously wrong. Assuming what you actually want is intersection of .pro and .color selectors, then you can simply do

$(".pro:.color").show();

fiddle

answered Dec 11, 2011 at 17:39

Ilia G

10.2k3 gold badges43 silver badges61 bronze badges

Comments

jfriend00 · Accepted Answer · 2011-12-11 18:37:59Z

1

.filter() takes a jQuery object as a parameter and returns a new object that consists of the elements in the first object minus the ones that aren't in the second jQuery object, so if you already have the jQuery objects, you can use them like this to show the objects that are in both:

var activeElementsColors = $("ul li.color");
var activeElementsPro = $("ul li.pro"); 
activeElementsPro.filter(activeElementsColors).show();

edited Dec 11, 2011 at 18:37

answered Dec 11, 2011 at 18:14

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Collectives™ on Stack Overflow

How to select same objects in two arrays using jQuery?

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related