How to get id from inside div using jquery

Question

How to get the id from the inside div. I have many div with class control but I want to get parent div id. How to get?

$(".getid").click(function() {
   alert($(this).closest('div').hasClass("control).attr("id"))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control" id="spa">
  Content
</div>
<div class="control" id="test">
  <div class="method">
    <a href="#" class="getid">Getid</a>
  </div>
</div>
<div class="control" id="awesome">
  Content
</div>

Change .closest('div').hasClass("control) to .closest('div.control') — Ram
– Ram, Commented Sep 19, 2018 at 9:40
You can use .parents() method of jQuery. $(this).parents(".control").attr("id"); — Awais Ashraf
– Awais Ashraf, Commented Sep 19, 2018 at 10:03

Zakaria Acharki · Accepted Answer · 2018-09-19 10:00:35Z

5

The problem comes from :

The closest selector that will return the first parent div (what is not what we need here).
The hasClass() since it will return a boolean if the element has the given class or not. (in your case the first parent doesn't have the given class control)

Instead of using hasClass() you need to use the class selector directely in the closest() method like:

$(this).closest('div.control').attr("id");

$(".getid").click(function() {
  console.log($(this).closest('div.control').attr("id"));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control" id="spa">
  Content
</div>
<div class="control" id="test">
  <div class="method">
    <a href="#" class="getid">Getid</a>
  </div>
</div>
<div class="control" id="awesome">
  Content
</div>
Js:

edited Sep 19, 2018 at 10:00

answered Sep 19, 2018 at 9:40

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

1 Comment

Kanaka k Over a year ago

@ Zakaria:Can you answer this question:stackoverflow.com/questions/52424524/…

dippas · Accepted Answer · 2018-09-19 10:45:23Z

1

Besides closest() - which return the first single node parent - already mentioned you can use parents() , but in this case will return multiple nodes with the element/class/id targeted.

It is just an alternative to closest() in this case scenario

$(".getid").click(function() {
  console.log($(this).parents('.control').attr("id"))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control" id="spa">
  Content
</div>
<div class="control" id="test">
  <div class="method">
    <a href="#" class="getid">Getid</a>
  </div>
</div>
<div class="control" id="awesome">
  Content
</div>

edited Sep 19, 2018 at 10:45

answered Sep 19, 2018 at 9:44

dippas

60.8k15 gold badges125 silver badges134 bronze badges

6 Comments

fdomn-m Over a year ago

You can, but it's irrelevant here - and you should indicate that .closest() finds the single parent that is closest while .parents() could return multiple nodes.

dippas Over a year ago

In this case there is no multiple nodes therefore no need to mention that I think :)

Rory McCrossan Over a year ago

closest() is preferred when searching for a single ancestor, as it stops after the first match.

fdomn-m Over a year ago

Future question: I got this answer from ^^here^^ and it states I can use .parents() as an exact replacement for .closest() - why am I getting multiple results? Just be complete.

fdomn-m Over a year ago

Nice alternative solution :)

|

Collectives™ on Stack Overflow

How to get id from inside div using jquery

2 Answers 2

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related