jQuery/Sizzle selector to find current element's parent?

Question

Is there a way I can get the selected element's parent using only jQuery's/sizzle's CSS selectors?

I need to be able to get an element's parent while using jQuery, but I'm unable use jQuery('#myelement').parent() since I'm receiving the selector as a string and the "user" needs to be able to move back up the tree.

I can't see anything in the docs, so I'm wondering whether it's undocumented or if there's a hack I can use?

why are you unable to use .parent() ? – David V. Mar 05 '10 at 10:17 — David V., Mar 05 '10 at 10:17
he might need the parent for the live function – naugtur Mar 05 '10 at 13:13 — naugtur, Mar 05 '10 at 13:13

score 3 · Answer 1 · answered Jul 04 '14 at 09:51

The correct solution (ie. the one which actually use jQuery selectors rather than jQuery API) is this one :

$(':has(> #myElement)');

That means that your "current element" actually has to be the 'has' parameter rather than the base expression. It shouldn't change anything, except that it is a bit less readable than <.

For reference, the jQuery API may not be a valid replacement to selectors in a few cases, such as :

$(document).on('click', ':has(> .widget)', function () {
    // ...
});

In this case, the selector allows to filter the live events.

score 0 · Answer 2 · answered Mar 05 '10 at 13:20

jQuery(jQuery('#myelement').parent()) is getting the object without the additional function.

Ok, end of jokes ;)

I'm guessing that You need the parent selected for the live function and that is why You can't get it this way.

jQuery('#'+jQuery('#myelement').parent().attr('id')).live(something);

It's the way You do it to make it work. If the parent element has no id You can use more complicated tricks

    //newline for reading comfort. skip it. --v
jQuery('[title='+jQuery('#myelement').parent() 
.attr('title',Math.round(Math.random()*100000)+']').attr('title')).live(something);

You can use id or title or class, depends on what is already on the page

And if You really need it to be found by just css selector - as far as I know this is impossible with css selectors by design

It *really* needs to be done via a CSS selector as the selector is being passed in as a string. Its rather annoying that CSS can't traverse back up the tree like XPath can. :( — Phillip B Oldham, Mar 05 '10 at 14:42

Sagi · Answer 3 · 2010-03-05T14:56:53.180

0

Such selector doesn't exists, nor in CSS neither in jQuery/Sizzle.

You can change the source code?

If yes, it is possible to add custom pseudo-selector:

jQuery.expr[":"].getParent = function (node, index, prop, nodes) {
    return jQuery(node).parent(); 
};

Use example (Note that parent already exists, so I've used getParent instead):

jQuery('#myelement:getParent');

edited Mar 05 '10 at 14:56

answered Mar 05 '10 at 14:50

Sagi

8,009
3
26
25

As @maël-nison's [answer](http://stackoverflow.com/a/24571489/1273938) show, it is indeed possible to select a parent directly. – LeoRochael Oct 17 '16 at 11:31
This does not work (anymore?). Pseudo-selectors are just filters, they can't return another element. You can see here that `h1:getParent` returns the same element: https://i.stack.imgur.com/fMZYQ.png – fregante Jan 25 '22 at 15:42

score 0 · Accepted Answer · answered Mar 05 '10 at 15:35

0

Since CSS can't traverse back up the tree like XPath can, I'm doing a bit of munging and checking for the character < in the string, splitting on that and calling .parent() manually. Its not optimal but it's working.

answered Mar 05 '10 at 15:35

Phillip B Oldham

18,807
20
94
134

jQuery/Sizzle selector to find current element's parent?

4 Answers4