2012-01-18 68 views
2

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

這是我現在有...

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

回答

0

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

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

http://jsfiddle.net/5pNaR/


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

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

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

+1

謝謝,效果很好。 – hillspro 2012-01-18 19:14:18

0

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

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

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

+0

感謝您的分解。 – hillspro 2012-01-18 19:14:32