在JQuery事件中查找父元素

Question

I've added a click event as follows and would like to check if the target has a specific parent.

$(document).click(function(event){
    // Check here if target has specific parent for example -> #parent
});

How can this be done?

Answer 1

There's a .parent() dom traversal method for this.

according to Pointy's crystal ball, you probably want to do something like this:

$(document).click(function(event) {
  if ($(event.target).parents('.selector').length > 0) {
  }
});

I'm not sure why are you set click handler on document, maybe looking for event delegation and the .on() ?

Answer 2

I believe this also works.. AFAIK jQuery events use the the literal element instead of a jQuery object when calling events. Basically this should be your normal DOM element with normal JavaScript properties.

$(document).click(function(event)
{
   myparent = $(this.parentNode); //jquery obj
   parent = $(this.parentNode)[0]; //plain DOM obj

   myself = $(this); //jquery obj;
   $elf = this; //plain DOM obj
});

Note: sometimes using 'self' as a variable is bad/causes conflicts with certain libraries so i used $elf. The $ in $elf is not special, like a jQuery convention or anything.

Answer 3

$(document).click(function(event){
    var $parent = $(this).parent();

     // test parent examples 
    if($parent.hasClass('someclass')) { // do something }

    if($parent.prop('id') == 'someid')) { // do something }

    // or checking if this is a decendant of any parent

    var $closest = $(this).closest('someclass');

    if($closest.length > 0 ) { // do something }

    $closest = $(this).closest('#someid'); 

    if($closest.length > 0 ) { // do something }
});

Answer 4

I have reliably used this in the past:

var target = $( event.target )

This will give you a reference to the jQuery object for the element that had the event invoked. You could use this same approach and see if the parent is "#parent", something like this:

var target = $( event.target )
if (target.parent().attr('id') == "#parent") {
    //do something
}