javascript - 页面状态下类成员仍然存在时如何编写

在jquery或js（最好是受良好支持的jQuery或js）中，如何在页面上仍然有该类成员的情况下做一会儿。

我在一段时间的套件中正在做的是系统地删除类中的元素，但是我无法一次删除所有元素。

假设该类为.card。

这是我的代码：

$('#dismissAllButton').click(function(){
    while($('.dataCard').length>0){
        $('.right').eq(0).remove();
        $('#left').children('.dataCard').first().addClass('animated').addClass('right');
        setTimeout(function(){
            $('.right').eq(0).remove();
            $('#right').children('.dataCard').first().addClass('animated').addClass('right');
        }, 150);
    }
});

HTML：

<div id="left">
    <div class="dataCard"></div>
    <div class="dataCard"></div>
</div>
<div id="right">
    <div class="dataCard"></div>
    <div class="dataCard"></div>
</div>

最佳答案

您不需要while循环。取而代之的是，首先遍历每个列表，然后在每个列表内遍历每个卡。这样，您可以根据卡片所在的列表来设置移除卡片的延迟时间，这样您就可以同时从每个列表中一张一张地移除卡片。

$("#dismissAllButton").on("click", function() {
    $("#left, #right").each(function(i){
        $(".dataCard",this).each(function(ii) {
            var card = $(this);
            setTimeout(function() {
                card.addClass("right");
                setTimeout(function() {
                    card.remove();
                },500);
            }, i*250+ii*500); // adjust `250` and `500` as needed.
        });
    });
});

Demo

250是左右之间的延迟，而500是动画持续时间（请不要忘记也要更新css过渡以反映这一点）