jQuery ottiene l'ID dell'elemento cercandolo per classe

Question

Questo è il mio html:

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

Voglio ottenere l'ID del div genitore ("# my_box_one") utilizzando la classe di quel 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
});   

});

Posso fare quanto segue e funzionerà bene, ma non mi sembra corretto.

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

Answer 1

Puoi utilizzare .closest (selector) , ad esempio:

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

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

.parent (selector) seleziona solo il genitore immediato dell'elemento.

Answer 2

parentsUntil ottiene tutti gli elementi principali fino a quello corrispondente al selettore.Non include l'elemento corrispondente.Stai cercando di ottenere il id del div intermedio, che è ovviamente indefinito.

È necessario utilizzare closest , che risale l'albero DOM finché non trova un elemento corrispondente alselector, quindi restituisce solo quell'elemento:

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

---

Modifica: per una maggiore velocità, ma meno flessibilità nel caso in cui modifichi il markup, puoi utilizzare la proprietà parentNode:

var abc = this.parentNode.parentNode.id;