JQuery obtenir id de l'élément en recherchant par classe

Question

Ceci est mon html:

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

Je veux obtenir l'ID de la div parent ( "# de my_box_one") en utilisant la classe de cette div ( "div-tête")

$(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
});   

});

Je peux faire ce qui suit et il fonctionne bien, mais il ne semble pas juste.

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

Answer 1

Vous pouvez utiliser .closest (sélecteur) , par exemple:

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

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

.parent (sélecteur) sélectionne uniquement parent immédiat de l'élément.

Answer 2

parentsUntil obtient tous les éléments parents jusqu'à ce que celui identifié par le sélecteur. Elle ne comprend pas l'élément adapté. Vous essayez d'obtenir le id du div intervenant, ce qui est évidemment non défini.

Vous devez utiliser closest , qui monte l'arbre DOM jusqu'à ce qu'il trouve un élément correspondant à la sélecteur, puis retourne uniquement cet élément:

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

---

Edit: pour la vitesse supplémentaire, mais moins de flexibilité dans le cas où vous changez votre balisage, vous pouvez utiliser la propriété parentNode:

var abc = this.parentNode.parentNode.id;