JQuery 删除 :last-child 和 .prepend

Question

我有下一个 jq 脚本：

setInterval(function(){
  $("#box div:last-child").fadeOut(200);
  $.post('_ajax.php',function(mr){
    $("#box").prepend(mr);
  });
}, 1000);

和下一个 html：

<div id="box">
   <div>23:56:16<span>xxxx</span></div>
   <div>23:56:16<span>xxxx</span></div>
   <div>23:56:16<span>xxxx</span></div>
   <div>23:56:16<span>xxxx</span></div>
</div>

所以，我需要每秒从 #box 中删除最后一个 <div> 和通过 ajax 获得的 .prepend 新 div。 但是此代码仅在第一秒有效。 IE。页面加载后 1 秒后，从 #box 删除最后一个 <div>，但下一次只有 .prepend 有效。

另外，我需要知道如何删除最后几个子 div。

Answer 1

如果您要淡出元素而不是删除它，则会出现问题。每次它获取元素时，它都会淡出已经淡出的元素。尝试这个。将完整的回调添加到淡入淡出并从 DOM 中移除元素。

setInterval(function(){
  $("#box div:last-child").fadeOut(200, function() { $(this).remove(); });
  $.post('_ajax.php',function(mr){
    $("#box").prepend(mr);
  });
}, 1000);

另外，正如 j08691 在他的评论中指出的那样，$.post 是异步的，这意味着请求可能会也可能不会在那 1 秒内完成。如果它很慢，您将删除元素而不附加任何元素。只有当您准备好添加新元素时，您才可以考虑淡出元素，如下所示：

setInterval(function(){
      $.post('_ajax.php',function(mr){
        $("#box div:last-child").fadeOut(200, function() { $(this).remove(); });
        $("#box").prepend(mr);
      });
    }, 1000);

如果您有兴趣从框的末尾删除一定数量的元素，您可以执行以下操作：

$("#box div").slice(-3).remove();

您可以在此处阅读 .slice http://api.jquery.com/slice/