javascript - 无法使用 jQuery 获取远程父 div 内的元素

Question

在具有许多像下面这样的 block 的 dom 中，我想在 link 时获取 pid 元素的名称(i.d 123) 被点击:

<div class="a-post">
    <a class="pid" name="123"></a>
    <div class="row">
        <p>Some text</p>
    </div>
    <br>
    <div class="row">
        <div class="col-xs-12">
            <p>Othe text </p>
        </div>

        <br>
        <div class="row">
            <div class="col-xs-1">
                <img class="link" src="link.svg">
            </div>

        </div>

    </div>
</div>

这是我的 jQuery:

$(document).ready(function () {
  $(".link").click(function () {
    let pid = $(this).parent(".a-post").find(".pid").attr('name');
    console.log('pid is:', pid);
 }
});

但是我得到pid is: undefined

我该如何解决这个问题？

Answer 1

您必须使用 .closest() 而不是 .parent()，因为 .parent() 仅上升 1 步。 .closest() 将继续执行，直到到达顶部或找到该元素。

$(document).ready(function() {
  $(".link").click(function() {
    let pid = $(this).closest(".a-post").find(".pid").attr('name');
    console.log('pid is:', pid);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a-post">
  <a class="pid" name="123"></a>
  <div class="row">
    <p>Some text</p>
  </div>
  <br>
  <div class="row">
    <div class="col-xs-12">
      <p>Othe text </p>
    </div>

    <br>
    <div class="row">
      <div class="col-xs-1">
        <img class="link" src="link.svg">
      </div>

    </div>

  </div>
</div>