jQuery的：尋找最接近的H2標籤

我想找到最接近H2標籤懸停的圖像下面是我的HTML代碼jQuery的：尋找最接近的H2標籤

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

請幫助我如何做到這一點。

來源

2017-06-17 Sikander

改變你的代碼，這個'$（本）.closest（ 'H2'）隱藏（）;'，你需要包括在CSS選擇單/雙qoutes您的標籤去工作 –

[查找具有特定類的最接近的祖先元素]的可能重複（https://stackoverflow.com/questions/22119673/find-the-closest-ancestor-element-that-has-a-specific-class ） – Rob

https://stackoverflow.com/questions/16194578/find-closest-element-in-complete-document – Rob

closest()只查找祖先樹。你需要一個更復雜的導線，因爲<h2>不是一個祖先

喜歡的東西：

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

來源

2017-06-17 14:49:22 charlietfl

Uncaught TypeError：$（...）。closest（... ）。職業不是一種功能離子 – Sikander

ooops ...是一個錯字...是'siblings（）'s' – charlietfl

@charlietfl好的答案... !! –

你在H2失蹤報價：

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

這應該工作

來源

2017-06-17 14:47:58

我累了，也沒有工作 – Sikander

-1

你必須考慮你的樹第一，主要是因爲你操縱你的DOM樹。在這種情況下，我的方法是去第一個孩子的節點，找到你的標記，然後做出治療。

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

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

來源

2017-06-17 14:50:13

雖然此代碼可能會回答問題，但提供有關如何解決問題和/或爲何解決問題的其他上下文可以提高答案的長期價值。 – Badacadabra

@Badacadabra確實如此，讓我們的社區日益提高1％。我做了一個編輯。 –

可以使用.parents()方法來獲得正確的祖先，並找到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>

來源

2017-06-17 14:52:25

請通過下面的代碼，它會幫你。修改@ 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>

來源

2017-06-17 15:03:42

jQuery的：尋找最接近的H2標籤

回答

相關問題