jQueryの：見つける私は、次のホバーイメージに最も近いH2タグを検索するタグ

Question

最も近いh2が、これは私が

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

助けてくださいjqueryの中でやろうとしていますものです

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

私のhtmlコードであります私はどうすればそれをすることができます。

Answer 1

closest()のみ祖先ツリーを見上げ動作するはずです。あなたは、あなたのDOM ツリーを操作している主な理由は、まず、あなたのツリーに考える必要が

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

Answer 2

あなたはH2に引用符が欠落していた。

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

これは

Answer 3

：<h2>のような

何か祖先ではないので、あなたは、より複雑なトラバースを必要としています。この状況での私のアプローチは、最初の子ノードに行き、h2タグを見つけてから、あなたの治療を行います。

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

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

Answer 4

あなたは正しいの祖先を取得し、h2タグを見つけるために.parents()メソッドを使用することができます。

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

この `$（この）.closest（ 'H2'）へ