如何获取 3rd parent 的 ID 属性值

Question

我试图在单击 link 时捕获第三个父项的 ID 属性值。示例：

<div id="First Div">
  <div class="class A">
    <div class="class B"></div>
    <div class="class C"></div>
    <div class="class D">
        <i class="link A">Clickable Element</i>
    </div>   
  </div>
</div>

我需要在单击 "Clickable Element" 时将值 "First Div" 存储在变量中。

Answer 1

您可以使用：

$(this).parent().parent().parent().attr("id");

但这不是一个好的解决方案，因为您需要确保这些父项确实存在。

Answer 2

首先 id 不应该包含空格，而是添加下划线。

您可以将点击事件附加到 class link 并在点击时转到具有属性 id 的父级并将其保存在变量中：

$('.link').on('click', function(){
    var id_attribute=$(this).closest('div[id]').prop('id');
})

希望这有帮助。

$('.link').on('click', function(){
    var id_attribute=$(this).closest('div[id]').prop('id');
    
    alert(id_attribute);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="First_Div">
  <div class="class A">
    <div class="class B"></div>
    <div class="class C"></div>
    <div class="class D">
        <i class="link A">Clickable Element</i>
    </div>   
  </div>
</div>

Answer 3

您可以使用 jquery 的 parents() 方法，它将遍历 DOM 直到找到匹配项。

$(this).parents().find('div#First_div').attr('id');

http://api.jquery.com/parents/

如何获取 3rd parent 的 ID 属性值

How to get ID attribute value of 3rd parent up

javascript

jquery

jquery-selectors