时间戳

首页 > 解决方案 > Jquery在prev中选择孩子不起作用

jquery - Jquery在prev中选择孩子不起作用

问题描述

编码：

  <article>
    <a href="#"><h4>h4 inside anchor</h4></a>
    <p>This is a sibling paragraph of that anchor which had h4 in it</p>
  </article>
  <script>
    $('article p').click(function(){
      $(this).prev('a h4').css("background-color", "yellow");
    });
  </script>

当我单击该段落时，我希望 h4 的背景颜色为黄色，但它不起作用。

此外，关于“prev”的 JQuery 文档对 pr​​ev 中具有后代的选择器不太清楚（因此第一个含义是它与选择器的常见预期行为没有什么不同）：

如果提供了选择器，则仅当它与该选择器匹配时，它才会检索前一个兄弟。

那么有什么问题呢？

标签： jquery

解决方案

问题是因为您在prev()调用中使用了子选择器。在内部，jQuery 使用类似的逻辑is()来确定兄弟元素是否匹配此选择器，因此它将测试是否a 是a h4，这绝不会是这种情况。

要解决此问题，请使用prev()和的组合find()：

$('article p').click(function() {
  $(this).prev('a').find('h4').addClass('highlight');
});
.highlight { background-color: #FF0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article>
  <a href="#">
    <h4>h4 inside anchor</h4>
  </a>
  <p>This is a sibling paragraph of that anchor which had h4 in it</p>
</article>

推荐阅读