jQuery parent of a parent

JavascriptJquery

Javascript Problem Overview


I am currently trying to find the parent of a parent of an element. I have a link being clicked that is in a <td>, and I'd like to get the <tr> object.

Why wont "$(this).parent().parent()" work? What will?

Thanks,
Brendan

Edit: It appears an error in my syntax was throwing the whole thing off. "$(this).parent().parent()" does in fact work, but I wound up going with $(this).closest('tr')" because it seems like the most efficient solution.

Javascript Solutions


Solution 1 - Javascript

The best way would probably be using closest:

$(this).closest('tr');

Check out the documentation:

> Closest works by first looking at the current element to see if it matches the specified expression, if so it just returns the element itself. If it doesn't match then it will continue to traverse up the document, parent by parent, until an element is found that matches the specified expression. If no matching element is found then none will be returned.

Solution 2 - Javascript

It should work. You can also try $(this).parents(tag) , where tag is the tag you want to find.

For example:

$(this).parents("tr:first")

Will find the closest tr "up the chain".

Solution 3 - Javascript

That should work... you might try

$(this).parents(':eq(1)');

The .parents(selector) says get all ancestors that match the selector

and the :eq(1) says find the oneth (zero-indexed, so the second) element in the list

Solution 4 - Javascript

This snippet has performed for me in the past:

$(this).parent().parent(); 

Post some code for us to see if there might be another problem somewhere...

Solution 5 - Javascript

also try

$(this).closest('div.classname').hide();

Solution 6 - Javascript

If you have any sort of id/class for the parent, you can use parents() but that will give you all parents up to the < body > unless you filter() or stop it some other way like

$(this).parents('.myClass');

Hope this helps someone :)

Solution 7 - Javascript

Try wrapping the $(this).parent() into an jQuery object like $($(this).parent()) I often find the need to do this to make sure I have a valid jquery object. From there you should be able to get a hold of the parents parent, or using the prev() perhaps.

Solution 8 - Javascript

var getParentNode = function(elem, level) { 
	level = level || 1; 
	for (var i = 0; i < level; i++) {
		if (elem != null) {
			elem = elem.parentNode; 
		}
	}
	return elem; 
}

Solution 9 - Javascript

.closest() is not always best option specially when you have same element construct.

<div>
    <div>
        <div>
        </div>
    </div>
</div>

You can do parent of a parent and it's very easy:

var parent = $('.myDiv').parent();
var parentParent = $(parent).parent();
var parentParentParent = $(parentParent).parent();

etc.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionbloudermilkView Question on Stackoverflow
Solution 1 - JavascriptPaolo BergantinoView Answer on Stackoverflow
Solution 2 - JavascriptPhilippe LeybaertView Answer on Stackoverflow
Solution 3 - JavascriptLathanView Answer on Stackoverflow
Solution 4 - JavascriptGabriel HurleyView Answer on Stackoverflow
Solution 5 - JavascriptDilipView Answer on Stackoverflow
Solution 6 - JavascriptabhilashvView Answer on Stackoverflow
Solution 7 - Javascriptkristian nissenView Answer on Stackoverflow
Solution 8 - JavascriptAlex PoloView Answer on Stackoverflow
Solution 9 - JavascriptWebapperView Answer on Stackoverflow