JQuery получить идентификатор элемента путем поиска его по классу

Question

Это мой HTML:

<div id="my_box_one" class="head-div">
   <div>
       <div class="some_box">a</div>
       <div class="some_box">b</div>
    </div>
</div>

Я хочу получить идентификатор родительского div ("# my_box_one"), используя класс этого div (". Head-div")

$(document).ready(function(){

$(".some_box").click(function(){
   var abc = $(this).parentsUntil(".head-div").attr("id");
   // also tried $(this).parent(".head-div") -- same effect
   alert(abc); // Shows as Undefined
});   

});

Я могу сделать следующее, и все будет хорошо, но это не так.

var abc = $(this).parent("div").parent("div").attr("id");

Answer 1

Вы можете использовать .closest (селектор) , например:

var abc = $(this).closest(".head-div").attr("id");

http://api.jquery.com/closest/

.parent (селектор) выбирает только непосредственного родителя элемента.

Answer 2

parentsUntil получает все родительские элементы, пока тот не соответствует селектору. Он не включает соответствующий элемент. Вы пытаетесь получить id промежуточного div, который явно не определен.

Вам нужно использовать closest, который идет вверх по дереву DOM, пока не найдет элемент, соответствующий селектору, а затем вернет только этот элемент:

var abc = $(this).closest(".head-div").attr("id");

---

Редактировать: для дополнительной скорости, но меньшей гибкости в случае изменения разметки вы можете использовать свойство parentNode:

var abc = this.parentNode.parentNode.id;