如何在类成员仍然存在于页面状态时进行编写

How to write while members of class still exist in page condition

本文关键字：状态 于页面 存在 成员      更新时间：2023-09-26

在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>

不需要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.
        });
    });
});

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

当长度不为0时，删除

while ($(".card").length) {
   $(".card").eq(0).remove();
}
相关文章：