Jquery：找到最近的h2标签答案

【问题标题】：Jquery : find closest h2 tagJquery：找到最近的h2标签
【发布时间】：2017-11-20 05:10:10
【问题描述】：

我想找到最接近悬停图像的 h2 标签下面是我的 html 代码

<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
      <div class="ih-item square effect7"><a href="#">
         <div class="img">
         <img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
         </div>
        <div class="info">
          <h3>Content </h3>
          <p>Some content </p>
        </div></a>
     </div>
 <h2>Arenas</h2>
 </div>

这就是我想要在 jquery 中做的事情

 $(document).ready(function () {
     $('.img').hover( function(){
          $(this).closest('h2').hide();  
    })
})

请帮助我，我该怎么做。

【问题讨论】：

将您的代码更改为$(this).closest('h2').hide();，您需要在单/双引号中包含您的标签，以便 css 选择器工作
Find the closest ancestor element that has a specific class的可能重复
stackoverflow.com/questions/16194578/…

标签： javascript jquery html css

【解决方案1】：

您在 h2 上缺少引号：

  $(document).ready(function () {
         $('.img').hover( function(){
              $(this).closest('.col-md-3').find('h2').hide();  
        })
    })

这应该可以工作

【讨论】：

【解决方案2】：

closest() 只查找祖先树。您需要更复杂的遍历，因为 <h2> 不是祖先

类似：

 $('.img').hover( function(){
      $(this).closest('.ih-item').siblings('h2').hide();  
 });

【讨论】：

未捕获的类型错误：$(...).closest(...).sibling 不是函数
哎呀...是错字...是siblings() 和s

【解决方案3】：

你必须首先考虑你的树，主要是因为你正在操纵你的 DOM 树。在这种情况下，我的方法是转到第一个子节点并找到您的h2 标签，然后进行处理。

 $(document).ready(function () {
         $('.img').hover( function(){
              $(this).parent().parent().parent().find('h2').hide();  
        })
    })

https://jsfiddle.net/9b9s87oo/1/

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。
@Badacadabra 没错，让我们的社区一天比一天好 1%。我进行了编辑。

【解决方案4】：

您可以使用.parents()方法获取正确的祖先并找到h2标签：

$(document).ready(function() {
  $('.img').hover(function() {
    $(this).parents().eq(2).find('h2').hide();
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
  <div class="ih-item square effect7">
    <a href="#">
      <div class="img" style="border:2px solid red;">
        <img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
      </div>
      <div class="info">
        <h3>Content </h3>
        <p>Some content </p>
      </div>
    </a>
  </div>
  <h2>Arenas</h2>
</div>

【讨论】：

【解决方案5】：

请通过下面的代码，它会帮助你。修改@mathiasfc 的代码，这样一旦你将鼠标悬停在图像上，税就会隐藏，悬停时你可以将其取回。

$(document).ready(function() {
  $('.img').hover(function() {
    $(this).parents().eq(2).find('h2').hide();
  },function(){
  $(this).parents().eq(2).find('h2').show();
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
  <div class="ih-item square effect7">
    <a href="#">
      <div class="img" style="border:2px solid red;">
        <img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
      </div>
      <div class="info">
        <h3>Content </h3>
        <p>Some content </p>
      </div>
    </a>
  </div>
  <h2>Arenas</h2>
</div>

【讨论】：