jQuery

jQuery "hasParent"

The JQuery "has" method effectively selects all elements where they have particular descendants.

I want to select elements based on the fact they have particular ancestors. I know about parent([selector]) and parents([selector]) but these select the parents and not the children with the parents.

So is there an ancestor equivalent of "has"?

Note: I already have the context of an element further down the hierarchy and I will be selecting based on this so I can't do a "top down" query.

Update

I've obviously explained myself really badly here, so I'll try and clarify:

    
1
    
2
    
3
  
  
    
4
    
5
    
6
  
  

I have a jQuery object that already consists of elements 2,3,4 and 5. I want to select those elements who have a parent with the class = x.

Hope that makes more sense.

Answer by psychotik for jQuery "hasParent"

if ( $('.foo').parents('.parentSelector').length ) { // has parent }

Answer by Sampson for jQuery "hasParent"

For a clean re-usable solution, consider extending the jQuery.fn object with a custom method used for determining the presence of a particular ancestor for any given element:

// Extend jQuery.fn with our new method  jQuery.extend( jQuery.fn, {      // Name of our method & one argument (the parent selector)      within: function( pSelector ) {          // Returns a subset of items using jQuery.filter          return this.filter(function(){              // Return truthy/falsey based on presence in parent              return $(this).closest( pSelector ).length;          });      }  });  

This results in a new method, $.fn.within, that we can use to filter our results:

$("li").within(".x").css("background", "red");  

This selects all list items on the document, and then filters to only those that have .x as an ancestor. Because this uses jQuery internally, you could pass in a more complicated selector:

$("li").within(".x, .y").css("background", "red");  

This will filter the collection to items that descend from either .x or .y, or both.

Fiddle: http://jsfiddle.net/jonathansampson/6GMN5/

Answer by Powerlord for jQuery "hasParent"

The easy way is this:

// all children of a specific parent match  $('parentSelector').children();    // All children matching a specific pattern, one level deep  $('parentSelector > childSelector');  // or  // $('parentSelector').children('childSelector');    // All children matching a specific pattern, multiple levels deep  $('parentSelector childSelector');  // or  // $('parentSelector').find('childSelector');  

or did you really need something more complicated than that?

Edit: If you already have an element, you can combine this with the parent() command, like so:

myElement.parents('parentSelector').find('childSelector'); // Will include self  

Answer by streetparade for jQuery "hasParent"

Try this

ul.myList > li > a  

This selector selects only links that are direct children of list elements, which are in turn direct children of elements that have the class myList.

Answer by David for jQuery "hasParent"

If I understand your question correctly, this would do:

$.fn.hasAncestor = function(a) {      return this.filter(function() {          return !!$(this).closest(a).length;      });  };    $('.element').hasAncestor('.container').myAction();    
          strong      
  

Answer by Ed Fryed for jQuery "hasParent"

object.each(function(){      element = $(this);      if(element.parent().hasClass("x")){          //do stuff      }  });  

this will affect every item in your object that has parent .x

Answer by Abdennour TOUMI for jQuery "hasParent"

$('body').hasParent('html') //true    $('div#myDiv').hasParent($('body')) //true  

API:

$.fn.hasParent=function(e){     return !$(this).parents(e).length  }  

Answer by xec for jQuery "hasParent"

I realize this is an old question, but I'm leaving this here for future visitors looking for something similar;

There is a $.contains(container, contained) method which returns a boolean.

https://api.jquery.com/jQuery.contains/

Answer by James Montagne for jQuery "hasParent"

You can actually use filter directly (without a function calling closest) and it will have better performance. Simply use a selector that matches elements contained within .x:

$("li").filter(".x *")  

this also differs slightly from the closest solutions suggested by others in that it will not match if the element itself has the given class but only if it is within an element with that class.

If matching an element with the class is desired as well, this could be modified slightly:

$("li").filter(".x, .x *")  

$("li").filter(".x *").css("background", "red");

  
1
2
3
  
4
5
6

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72