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