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

Question

在jquery或者js中，最好是支持良好的jQuery或者js，在页面上还存在该类的成员的情况下怎么办呢？

我在 while 套件中所做的就是系统地删除类中的元素，但我无法一次将它们全部删除。

假设该类是 .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>

Answer 1

你不需要 while 循环。相反，首先迭代每个列表，然后在每个列表中迭代每张卡。这样您就可以根据卡片所在的列表设置删除卡片的延迟，这样您就可以获得同时从每个列表中 1 个 1 个删除的效果。

$("#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 过渡以反射(reflect)这一点)