代码之家 › 专栏 › 技术社区 › Elvira

如何获取div的顶级父级

html jquery javascript

Elvira · 技术社区 · 7 年前

我想知道如何得到一个部门的最高级别的家长。我知道你可以使用 parent() ,但我在多个div上有一个click函数

<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>

data-row .

我有点击功能 .sub-cat .inner-cat 和 .cat 但是,我想得到 数据行 每次点击都能正常工作。

我试图通过使用 $(this).closest('.parent') 0 .

2 回复 | 直到 7 年前

Rory McCrossan Hsm Sharique Hasan 7 年前

为了达到这个目的,你可以使用 closest() parents() 是另一种选择,但是 最近() 在第一场比赛停止时表现更好。

$('.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() 在事件处理程序中停止事件冒泡并被嵌套元素捕获。

Jamiec 7 年前

你想要的 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前