点击获取当前元素

Question

我有两个具有相同类 pan-detail-div 的 div，并且有一个 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)：对于集合中的每个元素，通过测试元素本身并向上遍历其在 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 之间的区别，因为这两个函数做的事情非常不同。一个元素只能有一个 single 父元素，这就是 parent 检索的内容。 parents 遍历 DOM 树，并返回所有祖先。

在实践中：

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

文档：

• .parent()

  获取当前匹配元素集中每个元素的父元素，可选地由选择器过滤。

• .parents()

  获取当前匹配元素集中每个元素的祖先，可选地由选择器过滤。