jqueryを使用して親の親要素を見つけよう

Question

私は次のようなHTMLを持っています。私が必要とするのは、誰かがspan要素をクリックしたときに、その親要素がいくつかの条件をチェックしているのを見つけたい場合です。私は前の（）メソッドを使用しますが、それは私だけ近い親（ここではparent2）

<div class="container"> 
    <div class="contain"> 
     <div id="parent1"> 
      <div class="parent2"> 
       <span> Click here</span> 
      </div> 
     </div> 
    </div> 
</div> 

VAR currentComponent = $（event.target）.prev（）を提供します。 // は、ここで私parent2

は、どのように私は両親の親要素（この場合はparent2）を見つけることができます。私は非常にjqueryに精通していないので、任意の助けに感謝します。あなたが必要なもの

Answer 1

は

var currentComponent = $(event.target).parent().parent() 

は、単一の呼び出しでそれを行うには、あなたはあなたが.closestを試すことができます

var currentComponent = $(event.target).closest(".parent1") 

Answer 2

を使用することができます。ドキュメントから

：

.closest（）メソッドは、DOMツリー内のこれらの要素とそれらの祖先を検索及びマッチング要素から新しいjQueryオブジェクトを構築します。 （...） 要素自体をテストしてセレクタに一致する最初の要素を取得します。

これは、DOMの要素の祖先を通って上方に通過し、を使用すると、引数として渡さselectorに一致する最初の1を返します。だから、あなたの例では、あなたはそのような何かを行うことができます。

$("span").on("click", function(e) { 
    var myParent = $(this).closest(".parent2"); 
    var parentOfMyParent = $(this).closest(".parent1"); 
    var contain = $(this).closest(".contain"); 
    var containerAbove = $(this).closest(".container"); 
}); 

Answer 3

フィドル：

https://jsfiddle.net/c624re4o/

コード：

var grandParent = $(this).parent().parent(); 

全ワーキングコード

$(document).ready(function() { 
    $("span").click(function() { 
    var grandParent = $(this).parent().parent(); 
    alert(grandParent.attr('id')); // Just for Testing 
    }); 
}); 

$(document).ready(function() { 
 
    $("span").click(function() { 
 
    var grandParent = $(this).parent().parent(); 
 
    alert(grandParent.attr('id')); // Just for Testing 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="contain"> 
 
     <div id="parent1"> 
 
      <div class="parent2"> 
 
       <span> Click here</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>