jQueryクラスごとに検索して要素のIDを取得します

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（ "。head-div"）のクラスを使用して、親div（ "＃my_box_one"）のIDを取得したい

$(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（selector）, 、 例えば：

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

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

.Parent（selector） 要素の直接の親のみを選択します。

Answer 2

parentsUntil セレクターと一致するまで、すべての親要素を取得します。一致する要素は含まれません。あなたは取得しようとしています id 介入の div, 、明らかに未定義です。

使用する必要があります closest, 、セレクターに一致する要素が見つかるまでDOMツリーを上げてから戻ります それだけ その要素：

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

---

編集：余分な速度では、マークアップを変更した場合の柔軟性が低い場合は、 parentNode 財産：

var abc = this.parentNode.parentNode.id;