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()方法获取正确的祖先并找到h2代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

请仔细阅读以下代码，它会对您有所帮助。修改@ 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>

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/

Jquery：找到最近的h2标签

5 个答案: