遍历div? [英] Cycle through divs?

问题描述

我有这个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.

Consider that initially only the first box is visible. When I click 'Show me next box' I want the current visible box to be hidden, and the next .boxes on the list to appear.

我认为它唯一接近的是.each函数，但我认为我不应该循环显示所有div只是为了显示一个.

The only thing that I think it gets close is the .each function, but I shouldn't cycle through all divs just to show one, I think.

推荐答案

$('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;
});

实时演示.

这篇关于遍历div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！