jQuery Get Id of Element, поиск его по классу

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;