javascript - 使用 closest 函数查找属性值

Question

我已经试过了，但不知道它有什么问题。结果未定义

$(document).ready(function() {
  $("img").click(function(event) {
    var test = $(this).parent('.parentClass').closest('.headingLink').attr('href');
    console.log("testing this", test);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentClass">
  <div class="link__img">
    <img alt="ffdbb" class="article-link__imgSrc" src="img.jpg" />
  </div>
  <div class="content">
    <a class="headingLink" target="jakfhaf" alt="somethingf" href="www.google.com">
      <h4>some head</h4>
    </a>
    <p>hdgajsfjghasjfh</p>
  </div>
</div>

Answer 1

.closest() 向上遍历 DOM 树。您正在寻找的是 .find()。您还使用 .parent() 遍历了一个级别。请改用 .closest()。

$(document).ready(function() {
  $("img").click(function(event) {
    var test = $(this).closest('.parentClass').find('.headingLink').attr('href');
    console.log("testing this", test);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentClass">
  <div class="link__img">
    <img alt="ffdbb" class="article-link__imgSrc" src="img.jpg" />
  </div>
  <div class="content">
    <a class="headingLink" target="jakfhaf" alt="somethingf" href="www.google.com">
      <h4>some head</h4>
    </a>
    <p>hdgajsfjghasjfh</p>
  </div>
</div>