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）：对于集合中的每个元素，通过测试元素本身并遍历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之间的区别，因为这两个函数的功能完全不同。一个元素只能是一个单个父元素，这就是parent检索的内容。 parents走向DOM树，并返回所有祖先。

在实践中：

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

<强>文档：

.parent()

获取当前匹配元素集中每个元素的父元素，可选择通过选择器进行过滤。
.parents()

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

点击获取当前元素

2 个答案: