jQuery ancestors using jQuery objects

Question

I'd like to check ancestry using two jQuery objects. They don't have IDs, and are only going to be available as jQuery objects (or DOM nodes if you called get()). jQuery's is() only works with expressions, so this code would be ideal but will not work:

var someDiv = $('#div');

$('a').click(function() {
    if ($(this).parents().is(someDiv)) {
        alert('boo');
    }
}

Just want to see if one element is a child of another and I'd like to avoid stepping back into DOM land if possible.

Answer 1

You can use the index() method to check if an element exists in a list, so would the following work?

var someDiv = $('#div');

$('a').click(function() {
    if ($(this).parents().index(someDiv) >= 0) {
        alert('boo');
    }
}

From #index reference.

Answer 2

Along those lines, parents() optionally accepts a selector itself:

$('a').click(function() {
  if ($(this).parents("#div").length) {
    alert('boo');
  }
});

Answer 3

One way would be to use the filter function

$('a').click(function() {
    $(this).parents().filter(function() {
       return this == someDiv[0];
    }).each(function() {
       alert('foo');
    })
}

I think you may also be able to get away with using jQuery.inArray

if ($.inArray( someDiv, $(this).parents() ) ) {
        alert('boo');
}

Answer 4

Would you not get the result you want from simply using a CSS selector?

$( '#div a' ).click( function() { ... } );

Answer 5

Checking for (this).parents().index(someDiv) >= 0, as @Gareth suggests, will work just fine.

However, using the jQuery ancestry plugin is way faster / more efficient.

Answer 6

Try this:

var someDiv = $('#div');

$('a').click(function() {
    if ($.inArray($(this).parents().get(), someDiv.get(0)) {
        alert('boo');
    }
}

Answer 7

var $element = $('a');
while ($element && !$element.is('someDiv')) {
   var $element = $element.parent();
};