Finding ancestor with specific attribute or class in jQuery

Question

I have a DOM element elem that has an ancestor element which has the class myClass (alternatively an attribute with some name). The problem is that I need to find this ancestor easily with jQuery. Currently, I am stuck with ugly trial-and-error stuff like

var ancestor = $(elem).parent().parent().parent().parent().parent().parent().parent();

If the HTML code changes, the jQuery code easily breaks.

Is it possible to find the ancestor element with more elegant jQuery code?

Duplicate of [How To Select First Ancestor That Matches A Selector?](http://stackoverflow.com/questions/2867022/how-to-select-first-ancestor-that-matches-a-selector) — T.J. Crowder, May 02 '12 at 11:14

Rory McCrossan · Accepted Answer · 2022-05-17T07:58:39.173

15

Use closest(). it will traverse up the DOM from the current element until it finds a parent element matching the selector you provide.

var ancestorByClass = $(elem).closest(".myClass"); // by class

var ancestorByAttribute = $(elem).closest('[href="#foo"]'); // by attribute

edited May 17 '22 at 07:58

answered May 02 '12 at 11:10

Rory McCrossan

331,213
40
305
339

score 4 · Answer 2 · edited May 23 '17 at 10:29

4

Only class solution is presented, but not the attribute one.

I found my answer here: jQuery find closest parent link with attribute

edited May 23 '17 at 10:29

Community

1
1

answered Jan 12 '16 at 08:46

em2

93
6

score 3 · Answer 3 · answered Aug 23 '13 at 05:49

3

New method added by jQuery, the parents function allows you to check for all parents with selectors.

var ancestor = $(elem).parents(".myClass");

answered Aug 23 '13 at 05:49

Sunny R Gupta

5,026
1
31
40

score 1 · Answer 4 · answered May 02 '12 at 11:12

1

Try

var ancestor = $(elem).closest(selector what are you looking for);

answered May 02 '12 at 11:12

bitoshi.n

2,278
1
16
16

Thanks, dunno how I could have missed that one. – Gruber May 02 '12 at 11:13

Finding ancestor with specific attribute or class in jQuery

4 Answers4