點擊後找到第一個班級名稱

Question

我期待切換某個班級的第一個實例的可見性，但只能在點擊的項目之後切換。

這是我現在有...

$(document).ready(function() { 
    $('.showContentLink').click(function(){ 
     $(this).next('.showInfo').toggle();    
    }); 
    $('.showInfo').hide(); 
}); 

如果我點擊showContentLink應該被點擊項目後發現後第一"showInfo"類。

<a href="" class="showContentLink">show content</a> 
<div class="stuff">some stuff</div> 
<div class="stuff">some stuff</div> 
<div class="showInfo">Show me</div> 


<a href="" class="showContentLink">show content</a> 
<div class="stuff">some stuff</div> 
<div class="stuff">some stuff</div> 
<div class="showInfo">Show me</div> 

Answer 1

您可以使用.nextAll()，並縮小到第一個結果......

$(this).nextAll('.showInfo').first().toggle(); 

http://jsfiddle.net/5pNaR/

---

或者.nextUntil()，其次是.last().next() ...

$(this).nextUntil('.showInfo').last().next().toggle(); 

http://jsfiddle.net/5pNaR/2/

Answer 2

你應該考慮改變你的html，如果事情分組了，那麼它們應該有一些共同的屬性，或者包含在某種分組元素中。然而，在挑戰的精神，你看它是什麼：

$(this).nextAll('.showInfo').first().toggle; 

.next()只會搶第二天兄弟，從來沒有任何更遠，然後用你的選擇進行篩選。你想要做的是抓住所有以下的兄弟姐妹.nextAll()，由選擇器過濾，然後只保留第一個。