如何在几个div中迭代切换元素

Question

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

在一个div中我可以使用这样的东西：

$(".parent").find(".child").first().fadeToggle(500, function showNext() {
    $( this ).next( ".child" ).fadeToggle( 500, showNext );
});

但它仅适用于第一个父div，如何切换所有子div？

Answer 1

尝试：

$(".child:visible:first").fadeToggle(500, function showNext() {
    $(".child:visible:first").fadeToggle( 500, showNext );
});

<强> jsFiddle example

Answer 2

您可以尝试这样的事情：

var $children = $(".parent .child"),
    index = 0;

$children.eq(index).fadeToggle(700, function showNext() {
    if (++index < $children.length) {
        $children.eq(index).fadeToggle( 700, showNext );
    }
});

演示：http://jsfiddle.net/N9tz5/