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