jquery - 单击时获取当前元素

Question

我有两个具有相同类pan-detail-div的div，并且有一个span标签。当用户单击该 span 标签时，我想获取该 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( selector ): For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

$(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>