Jquery :查找最接近的 h2 标签

Question

我想找到最接近悬停图像的 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();  
    })
})

请帮帮我该怎么做.

Answer 1

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

像这样：

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

Answer 2

您可以使用 .parents(( 方法获取正确的祖先并查找 for 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>

Answer 3

请浏览以下代码，它会帮助你。修改@mathiasfc的代码，因此一旦您将鼠标悬停在图像上，taxt 就会隐藏，悬停在图像上时，您可以将其取回。

$(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>

Answer 4

您在 h2 上缺少引号：

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

这应该有效

Answer 5

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

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

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