How to find a parent with a known class in jQuery?

Question

I have a <div> that has many other <div>s within it, each at a different nesting level. Rather than give every child <div> an identifier, I rather just give the root <div> the identifier. Here’s an example:

<div class="a" id="a5">
  <div class="b">
    <div class="c">
      <a class="d">
      </a>
    </div>
  </div>
</div>

If I write a function in jQuery to respond to class d and I want to find the ID for its parent, class a, how would I do this?

I cannot simply do $('.a').attr('id');, because there are multiple class as. I could find its parent’s parent’s parent’s ID but that seems of poor design, slow, and not very polymorphic (I would have to write different code for finding the ID for class c).

SLaks · Accepted Answer · 2011-03-17 00:31:30Z

719

Assuming that this is .d, you can write

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

The closest method returns the innermost parent of your element that matches the selector.

answered Mar 17, 2011 at 0:31

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Risord Over a year ago

Note that there is little catch: If your starting element matches query too you don't get parent element but same element instead. This may or may not be wanted behaviour. If not, I recomend this: $(this).parent().closest('.a');

Wang'l Pakhrin Over a year ago

Very helpful. I always use to do $(this).parent().parent().parent() and i knew there was a better solution.

Drew Noakes · Accepted Answer · 2011-03-17 00:30:57Z

49

Pass a selector to the jQuery parents function:

d.parents('.a').attr('id')

EDIT Hmm, actually Slaks's answer is superior if you only want the closest ancestor that matches your selector.

answered Mar 17, 2011 at 0:30

Drew Noakes

313k174 gold badges704 silver badges770 bronze badges

Comments

Anjana Silva · Accepted Answer · 2020-05-26 11:34:41Z

15

Extracted from @Resord's comments above. This one worked for me and more closely inclined with the question.

$(this).parent().closest('.a');

Thanks

answered May 26, 2020 at 11:34

Anjana Silva

9,3514 gold badges57 silver badges59 bronze badges

Comments

Amr Elgarhy · Accepted Answer · 2011-03-17 00:38:29Z

13

You can use parents() to get all parents with the given selector.

Description: Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

But parent() will get just the first parent of the element.

Description: Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

jQuery parent() vs. parents()

And there is .parentsUntil() which I think will be the best.

Description: Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector.

edited Mar 17, 2011 at 0:38

answered Mar 17, 2011 at 0:33

Amr Elgarhy

69.2k70 gold badges193 silver badges312 bronze badges

1 Comment

SLaks Over a year ago

He only wants a single parent, so he should call closest.

Huy · Accepted Answer · 2021-01-05 14:44:19Z

10

<div id="412412412" class="input-group date">
     <div class="input-group-prepend">
          <button class="btn btn-danger" type="button">Button Click</button>
          <input type="text" class="form-control" value="">
      </div>
</div>

In my situation, i use this code:

$(this).parent().closest('.date').attr('id')

Hope this help someone.

edited Jan 5, 2021 at 14:44

answered Nov 2, 2020 at 13:31

Huy

5265 silver badges15 bronze badges

1 Comment

raquelhortab Over a year ago

you don't really need the parent() call, the closest will do

jai3232 · Accepted Answer · 2018-07-23 17:49:41Z

4

Use .parentsUntil()

$(".d").parentsUntil(".a");

answered Jul 23, 2018 at 17:49

jai3232

4314 silver badges7 bronze badges

1 Comment

Dustin Halstead Over a year ago

That would target every parent element until reaching the matched, parent element.

Collectives™ on Stack Overflow

How to find a parent with a known class in jQuery?

6 Answers 6

2 Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related