クリック時の現在の要素を取得

Question

私は同じクラスpan-detail-divの2つのdivを持ち、スパンタグを持っています。 ユーザーがそのスパンタグをクリックすると、そのdivを取得します。たとえば、ユーザーが左側のdivのスパンをクリックすると、そのdiv だけが返されますが、現在は両方のdivが取得されています。

HTML

<div class="pan-detail-div" style="float=left;"> 
<span class="show-more"></span> 
</div> 

<div class="pan-detail-div"> 
<span class="show-more"></span> 
</div> 

jQueryの

$(".show-more").click(function() { 
    var providerContainer = $(this).parents().find(".pan-detail-div"); 
} 

Answer 1

あなたがjQuery closest使用することができます：セット内の各要素について、要素自体をテストを通してアップトラバースすることによってセレクタに一致する最初の要素を得る：.closest

（セレクタ）そのDOMツリーの先祖。

$(function() { 
 
    $(".show-more").click(function (e) { 
 
    var providerContainer = $(this).closest(".pan-detail-div"); 
 
    console.log(providerContainer[0].outerHTML); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div class="pan-detail-div" style="float=left;"> 
 
    <span class="show-more">span1</span> 
 
</div> 
 
<div class="pan-detail-div"> 
 
    <span class="show-more">span2</span> 
 
</div>

Answer 2

$(this).parent()は、トリックを行う必要があります。

parentとparentsの違いは、2つの機能が非常に異なることに注意してください。要素はという単一のの親のみであり、それはparentが取得するものです。 parentsはDOMツリーを上に移動し、すべての祖先を返します。

$(".show-more").click(function() { 
    var providerContainer = $(this).parent(); 
} 

ドキュメント：実際に

マッチした要素の現在のセット内の各要素の親を取得

• .parent()

  、場合により濾過セレクタ。

• .parents()

  は、任意選択によりフィルタリングマッチした要素の現在のセット内の各要素の祖先を取得します。