jQuery: selecting grandparents

Is there a better way to select grandparent elements in jQuery in order to avoid this ?

$(this).parent().parent().parent().parent().parent().children(".title, .meta").fadeIn("fast");

Thanks.

You can use the parents() method which matches parents against a selector

http://api.jquery.com/parents/

Or if you're using 1.4 there is a new parentsUntil() method

http://api.jquery.com/parentsUntil/

In addition to parents(), as they've said, you should also http://api.jquery.com/closest/">check out closest(). Read the comparison in the documentation there, but its main differences are that it searches for only one result, and it includes $(this) in what it searches (could get the thing you're searching from if you're not specific enough). Pros and cons.

I wrote this simple plugin because I thought I had an unambiguous class selection somewhere giving me errors. Selecting grandparent seemed more direct than $().parents() for this particular case.

Well, I used this once then realized I actually had a spelling error. Not sure how helpful it really is. $('myelem').gparent(2); gets you the grandparent of 'myelem'.

(function( $ ){
$.fn.gparent = function( recursion ){
	if( recursion == undefined ) recursion = 2;
	if(typeof(recursion) == "number"){
		recursion = parseInt( recursion );
		if( recursion > 0 ){
			gparent_holder = $(this);
			for(var gparent_i = 0; gparent_i < recursion; gparent_i++){
				gparent_holder = gparent_holder.parent();
			}
			return gparent_holder;
		}
		else return false;
	}
	else return false;
}
})( jQuery );

@Femi had an answer to do this, and mentioned recursion, yet his solution was not recursive, here's a recursive jQuery solution for getting ancestors of an item:

$.fn.gparent = function( recursion ){
   console.log( 'recursion: ' + recursion );
   if( recursion > 1 ) return $(this).parent().gparent( recursion - 1 );
   return $(this).parent();
};

If this is your HTML:

<div id='grandparent'>
  <div id='parent'>
    <div id='child'>
      child
    </div>
  </div>
</div>

You can call

console.log( $('#child').gparent( 2 ) );

to get the grandparent of element child. Here's the JSFiddle

Use the parents() selector to get all parents of an element. You can then either search the collection, or iterate over it if you want to affect all ancestors.

Using parents() and children() get the same results.

Example instead of using this :

$(this).parent().parent().parent().children(".title").fadeIn("fast");

you can use this :

$(this).parents().children(".title").fadeIn("fast");