如果应用于class属性，jQuery最接近的返回未定义

Question

While running following jquery code i am constantly getting 'undefined' in alert box. If i replace class="back" with id="back" and reflect same in jquery code , it works fine. But i am in situation such that closest need to be of class not an id. How to resolve this?

HTML :

<div id="up">
  <div id="boom">
  <div class="back">  </div>
  </div>
</div>

JQUERY :

$(document).ready(function(){
  alert($(".back").closest("div").attr("id"));
});

Answer 1

.closest starts from the current node. But this node haven't got id attribute. You need to change the selector in in .closest as this:

$(document).ready(function(){
  alert($('.back').closest('div[id]').attr('id'));
});

Now you are searching for a div which has id as an attribute.

Answer 2

that is because your

<div class="back">

doesn't have id attribute so it will be undefined, check with

.attr("class")

it will return class name

Answer 3

You can also use this

$(document).ready(function(){
 alert($(".back").parents("div").attr("id"));
});

Answer 4

closest() method checks from the current node, so if you want to find the first anchester(parent) div tag of the class = "back" then it should not be the div tag so you need to change the div tag to span or other tags

 $(document).ready(function() { console.log($(".back").closest("div").attr('id')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div id="up"> <div id="boom"> <span class="back"> </span> </div> </div>