单击获取当前元素

Question

我有两个 div 具有相同的 class pan-detail-div 并且有一个 span 标签。当用户点击那个 span 标签时，我想得到那个 div。例如，如果用户单击左侧 div 的跨度，则应该 return 只有 div 但目前我得到了两个 divs.

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

$(this).parent() 应该可以解决问题。

请注意 parent 和 parents 之间的区别，因为这两个函数做的事情非常不同。一个元素只能有一个单父元素，这就是 parent 检索的内容。 parents 走上 DOM 树，returns 所有的祖先。

实践中：

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

文档：

.parent()

Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
.parents()

Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

Answer 2

您可以使用 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>

单击获取当前元素

Get current element on click

jquery

click

this

jquery-selectors