通過div循環？

Question

我有這樣的HTML：

<div id="container"> 

<div class="boxes">first box</div> 
<div class="boxes">second box</div> 
<div class="boxes">third box</div> 

</div> 

<a href="jquery">Show me next box</a> 

考慮到最初只有第一個框是可見的。當我點擊'顯示下一個框'時，我想隱藏當前可見框，並且列表中的下一個.boxes將出現。我認爲，我認爲它唯一接近的是.each函數，但我不應該遍歷所有的div，只是爲了展示一個函數。

Answer 1

$('a').click(function() { 
    var visibleBox = $('#container .boxes:visible'); 
    visibleBox.hide(); 
    var nextToShow = $(visibleBox).next('.boxes:hidden'); 
    if (nextToShow.length > 0) { 
     nextToShow.show(); 
    } else { 
     $('#container .boxes:hidden:first').show(); 
    } 
    return false; 
}); 

Live demo。

Answer 2

$('a').click(function(){ 
    $('.boxes').filter(':visible').hide().next().add('.boxes:first').last().show(); 
});