同时迭代多组元素（类）的子元素

Question

我尝试同时循环浏览多个块引用列表。效果应该与您在Commercial Type 网站上看到的一样：每个.quotes 只看到一个blockquote，延迟后它会转到下一个blockquote，一个接一个.quotes。

我的 HTML 结构如下所示：

<section>
    <div class="quotes">
        <blockquote>Blockquote 1</blockquote>
        <blockquote>Blockquote 2</blockquote>
        <blockquote>Blockquote 3</blockquote>
        <blockquote>Blockquote 4</blockquote>
    </div>
</section>
<section>
    <div class="quotes">
        <blockquote>Blockquote 1</blockquote>
        <blockquote>Blockquote 2</blockquote>
    </div>
</section>
<section>
    <div class="quotes">
        <blockquote>Blockquote 1</blockquote>
        <blockquote>Blockquote 2</blockquote>
        <blockquote>Blockquote 3</blockquote>
    </div>
</section>

在每个.quotes 中，块引用应该无限循环。我坚持的事情是我不知道如何同时迭代一组.quotes。我发现的所有解决方案都只针对一个容器（通常带有一个 id）。

有什么想法吗？

Answer 1

试试

$('.quotes').each(function(idx){
    var $quote = $(this);
    $quote.children().hide();

    function showFirst(){
        var $first = $quote.children().first().fadeIn('slow').delay(2500).fadeOut('fast', function(){
            setTimeout(showFirst);
            $first.appendTo($quote)
        })
        }

    setTimeout(showFirst, idx * 100);
})

演示：Fiddle