循环通过div？

我有这个HTML：

 
first box
 
second box
 
third box
 
 Show me next box 

考虑到最初只有第一个框可见。 当我点击“向我显示下一个框”时，我希望隐藏当前可见框，并显示列表中的下一个.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; }); 

现场演示 。

Answer 2

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