jQuery obtenga ID de elemento buscandolo por clase

Question

Este es mi html:

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

Quiero obtener la identificación del Div Padre ("#my_box_one") usando la clase de esa 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
});   

});

Puedo hacer lo siguiente y funcionará bien, pero no parece correcto.

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

Answer 1

Puedes usar .Closest (selector), por ejemplo:

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

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

.Parent (selector) Selecciona solo el padre inmediato del elemento.

Answer 2

parentsUntil Obtiene todos los elementos principales hasta que el que coincida con el selector. No incluye el elemento coincidente. Estás tratando de conseguir el id de la intervención div, que obviamente está indefinido.

Necesitas usar closest, que sube por el árbol dom hasta que encuentra un elemento que coincide con el selector, luego regresa solamente ese elemento:

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

---

Editar: para una velocidad adicional, pero menos flexibilidad en el caso de que cambie su marcado, podría usar el parentNode propiedad:

var abc = this.parentNode.parentNode.id;