Question

我想知道如何获取div的顶级父级。我知道您可以使用parent()，但是我在多个div上都具有点击功能

<div class="parent" data-row="1">
  <div class="cat div1">
    <div class="sub-cat div1_1">content</div>
    <div class="sub-cat div1_2">content</div>
    <div class="sub-cat div1_3">
      <div class="inner-cat 1_3_3">innercontent</div>
    </div>
  </div>
  <div class="cat div2">
    <div class="sub-cat div2_1">content</div>
  </div>
</div>

比方说，我有一个父div，它有一个父类名称，它在data-row中也包含一个索引号。

我在.sub-cat，.inner-cat和.cat上具有点击功能，但是，我希望每次点击都获得data-row功能。

我尝试通过使用$(this).closest('.parent')到达父div来检索数据行，但这不起作用，因为它返回长度0。

Answer 1

要实现此目的，您可以使用closest()。 parents()是一种替代选择，但是closest()的表现更好，因为它在第一场比赛中就停止了。

$('.cat, .innercat, .sub-cat').click(function(e) {
  e.stopPropagation();
  var row = $(this).closest('.parent').data('row');
  console.log(row);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-row="1">
  <div class="cat div1">
    <div class="sub-cat div1_1">content</div>
    <div class="sub-cat div1_2">content</div>
    <div class="sub-cat div1_3">
      <div class="inner-cat 1_3_3">innercontent</div>
    </div>
  </div>
  <div class="cat div2">
    <div class="sub-cat div2_1">content</div>
  </div>
</div>

还请注意，在事件处理程序中使用stopPropagation()可以阻止事件冒泡并被嵌套元素捕获。

Answer 2

您想要parents(".parent")会一直沿父树走

$('.cat, .sub-cat, .inner-cat').on("click", function(){
    var $parent = $(this).parents(".parent");
    console.log($parent.data("row"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" data-row="1">
  <div class="cat div1">
      <div class="sub-cat div1_1">content</div>
      <div class="sub-cat div1_2">content</div>
      <div class="sub-cat div1_3">
          <div class="inner-cat 1_3_3">innercontent</div>
      </div>
  </div>
  <div class="cat div2">
     <div class="sub-cat div2_1">content</div>
  </div>
</div>

如何获得div的顶级父级

2 个答案: