Find whether jQuery object is included inside another jQuery object

Question

so let's say I have some jQuery that runs as follows:

var myVar1 = $('.myClass1, .myClass2');
myFunction(myVar1); // Does something to element myVar1

var myVar2 = $('#myId').parent();
myFunction(myVar2); // Does something to element myVar2

Here's the problem. Sometimes #myId's parent will be its own element, but it will sometimes also have either class .myClass1 or .myClass2. However, I don't want to run myFunction() on #myId's parent twice.

So the html could either be like:

<div class="myClass1"></div>
<div class="myClass1"></div>
<div class="myClass2"></div>
<div>    
    <div id="myId"></div>
</div>

Or it could be like this:

<div class="myClass1">
    <div id="myId"></div>
</div>
<div class="myClass1"></div>
<div class="myClass2"></div>

The jQuery needs to call the function on each <div> only once.

How do I detect if myVar2 is contained within myVar1?

Can you add some simple HTML illustrating an element you don't want selected? — Jason Sperske
– Jason Sperske, Commented Sep 29, 2015 at 19:06
I think your variables are misnamed. Shouldn't one and two be myVar1 and myVar2? — jds
– jds, Commented Sep 29, 2015 at 19:07

Morklympious · Accepted Answer · 2015-09-29 19:24:09Z

To quote you,

How do I detect if myVar2 is contained within myVar1?

Each of your variables is returning a jQuery object, which is great, sure. If you want to find out if one jQuery object contains yet another jQuery object in its returned set, you can use jQuery's index() method.

From index():

If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.

So we know we can reasonably get a number equal to or greater than zero representing the index of this other jQuery object IF it exists inside of myVar1, otherwise we get -1 if it doesn't exist.

if var myVar2 = $('#myId').parent(); is included in var myVar1 = $('.myClass1, .myClass2'), then running myVar1.index(myVar2) will return a number greater than or equal to zero. Otherwise -1.

Hope that helps!

Maximillian Laumeister · Accepted Answer · 2015-09-29 19:09:21Z

2

You can do this using the jQuery not selector, which removes matched elements from the set. To modify your example:

var one = $('.myClass1, .myClass2');
myFunction(one); // Does something to element myVar1

var two = $('#myId').not(one).parent();
myFunction(two); // Does something to element myVar2

This modification to the second selection will make it so that #myId is selected only if the element does not have either the .myClass1 or .myClass2 class attached.

edited Sep 29, 2015 at 19:09

answered Sep 29, 2015 at 19:07

Maximillian Laumeister

20.5k10 gold badges62 silver badges84 bronze badges

4 Comments

Jason Sperske Over a year ago

According to the documentation you can pass a jQuery object to not like this: var two = $('#myId').not(one).parent();

Maximillian Laumeister Over a year ago

@JasonSperske Thanks, I didn't know about that, and it simplifies the code a bit further!

Jason Sperske Over a year ago

I think the final code might need a little more adjusting, now that I see the example html, just trying to come up with a jsfiddle to demonstrate this and I'm hitting a bit of a wall

Maximillian Laumeister Over a year ago

@JasonSperske You're right, the example HTML kind of contradicts the explanation that was posted earlier.

Collectives™ on Stack Overflow

Find whether jQuery object is included inside another jQuery object

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related