CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sikander
Sikander

Reputation: 2835

Jquery : find closest h2 tag

i want to find closest h2 tag to hovered image following is my html code 

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

this is what i am trying to do in jquery 

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

Please help me how can i do it .

Upvotes: 3

Views: 4370

Answers (5)

Yuri Pereira
Yuri Pereira

Reputation: 1995

You have to think in your tree first, mainly because you are manipulating your DOM tree. My approach in this situation is go to the first-child node and find your h2 tag, after that make your treatment.

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

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

Upvotes: -1

Alex Mac
Alex Mac

Reputation: 2993

PLease go through below code, It will help you. Amending @mathiasfc's code so once you hover on image taxt will hide and on hover out you can get it back.

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

Upvotes: 2

charlietfl
charlietfl

Reputation: 171690

closest() only looks up the ancestor tree. You need a more complex traverse since the <h2> is not an ancestor

Something like:

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

Upvotes: 7

Mathiasfc
Mathiasfc

Reputation: 1697

You can use the .parents() method to get the correct ancestor and find for h2 tag:

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

Upvotes: 4

Riaz Laskar
Riaz Laskar

Reputation: 1322

you were missing quotes on h2 :

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

this should work

Upvotes: 0

Related Questions