jquery - 同时遍历多组元素（类）的子元素

Question

我尝试同时循环浏览多个块引用列表。效果应该与您在商业类型网站上看到的一样：您blockquote每次只看到一个，.quotes并且在延迟后会转到下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);
})

演示：小提琴