jquery - 親divを引っ張って表示する方法

Question

私はjQuery初心者です。HTMLクラスのリストを繰り返し処理し、各クラスについて親divの名前を表示したいと思います。具体的には、以下の food_type クラスを反復処理して、それぞれの親 ID (「チキン」など) を表示したいと考えています。だから、このようなもの...

$(".food_type").each(function() {
      alert(...)


  <div id="chicken">
      <div class="kg"></div>
      <div class="food_type">100</div>
      <div class="label">Chicken</div>
  </div>

 <div id="eggs">
    <div class="kg"></div>
    <div class="food_type">100</div>
    <div class="label">Eggs</div>
  </div>

  <div id="pork">
    <div class="kg"></div>
    <div class="food_type">100</div>
    <div class="label">Pork</div>
  </div>

Answer 1

eachメソッド内で、thisキーワードは反復される要素を考慮します。したがって、それを ( を実行して$(this)) jQuery オブジェクトにラップし、そのparent. 最後に、親のid属性を取得します。すべてをまとめると、次のようになります。

$(".food_type").each(function() {
    alert($(this).parent().attr("id"));
}

参考文献：

• http://api.jquery.com/each/
• http://api.jquery.com/parent/
• http://api.jquery.com/attr/

Answer 2

$(".food_type").each(function() {
      var category = $(this).parent().attr('id');
});

Answer 3

試す

$(".food_type").each(function() {
  alert($(this).parent().attr("id"));
});

Answer 4

$(".food_type").each(function() {
    alert($(this).parent().prop("id"));
}