时间戳

首页 > 解决方案 > 如何获得div的顶级父级

javascript - 如何获得div的顶级父级

问题描述

我想知道如何获得 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.catdata-row

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

标签： javascriptjqueryhtml

解决方案

为此，您可以使用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()在事件处理程序中使用 来阻止事件冒泡并被嵌套元素捕获。

推荐阅读