javascript - 删除元素然后再次添加它们

Question

我有这个文档树子树:

<div id="content">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
</div>

我想要实现的是清空 childNodes的#content ，然后再次填充 <div>有 class="tile" 。这是我所做的。

$(".tile").fadeOut( showTileSpeed, function() {
    $(this).remove();
});


tiles[tileIndex]();// function adding .tiles to my #content

$(".tile").first().fadeIn(showTileSpeed, function showNext() {
    $(this).next(".tile").fadeIn(showTileSpeed, showNext);
});

似乎.tiles被添加在remove()之前被调用以便屏幕上没有任何反应...

有人对这种行为有解释吗？看来添加定时器并不是一个好的解决方案。

谢谢!

Answer 1

$(this).remove(); 在调用 fadeOut 后调用 showTileSpeed 毫秒。但是 tiles[tileIndex]() 在调用 fadeOut 后立即被调用。

所有图 block 都被移除后，您应该再次添加图 block 。您可以通过将所选元素传递到 $.when ^[docs] 来实现此目的并在返回的 promise 对象上注册回调(使用 .done() ^[docs] )。一旦所有动画完成，回调就会被调用:

var $tiles = $(".tile").fadeOut(showTileSpeed, function() {
    $(this).remove();
});

$.when($tiles).done(function() {      // <-- after all animations do this
    tiles[tileIndex]();

    $(".tile").first().fadeIn(showTileSpeed, function showNext() {
        $(this).next(".tile").fadeIn(showTileSpeed, showNext);
    });
});

另请参阅Execute complete function only once in jQuery animation? (特别是 this answer )。

<小时/>

更新:由于调用 .remove() 似乎会干扰动画状态的测试，因此将调用移至 .remove()可能是一个更好的解决方案:

var $tiles = $(".tile").fadeOut(showTileSpeed);

$.when($tiles).done(function() {
    $tiles.remove();
    tiles[tileIndex]();

    $(".tile").first().fadeIn(showTileSpeed, function showNext() {
        $(this).next(".tile").fadeIn(showTileSpeed, showNext);
    });
});

但是如果您只想更新元素的内容，则不必将它们从 DOM 中删除。