Jquery : find closest h2 tag

Question

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 .

change your code to this `$(this).closest('h2').hide();`,you need to include your tag in single/double qoutes for css selector to work — Manish Yadav, Jun 17 '17 at 14:47
Possible duplicate of [Find the closest ancestor element that has a specific class](https://stackoverflow.com/questions/22119673/find-the-closest-ancestor-element-that-has-a-specific-class) — Rob, Jun 17 '17 at 15:28
https://stackoverflow.com/questions/16194578/find-closest-element-in-complete-document — Rob, Jun 17 '17 at 15:35

charlietfl · Accepted Answer · 2017-06-17T14:58:52.457

7

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();  
 });

edited Jun 17 '17 at 14:58

answered Jun 17 '17 at 14:49

charlietfl

170,828
13
121
150

Uncaught TypeError: $(...).closest(...).sibling is not a function – Sikander Jun 17 '17 at 14:50
ooops...is a typo ...is `siblings()` with an `s` – charlietfl Jun 17 '17 at 14:51

score 4 · Answer 2 · answered Jun 17 '17 at 14:52

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>

score 2 · Answer 3 · answered Jun 17 '17 at 15:03

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>

Riaz Laskar · Answer 4 · 2017-06-17T14:50:02.147

0

you were missing quotes on h2 :

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

this should work

edited Jun 17 '17 at 14:50

answered Jun 17 '17 at 14:47

Riaz Laskar

1,317
9
17

Yuri Pereira · Answer 5 · 2017-06-17T15:19:28.823

-1

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/

edited Jun 17 '17 at 15:19

answered Jun 17 '17 at 14:50

Yuri Pereira

1,945
17
24

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Badacadabra Jun 17 '17 at 15:09
@Badacadabra That's true, let's make our community better 1% day-by-day. I made an edit. – Yuri Pereira Jun 17 '17 at 15:20

Jquery : find closest h2 tag

5 Answers5