JQuery remove :last-child and .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>，并.prepend通过ajax获得的新div。但是此代码仅在第一秒有效。即从页面加载到#box删除的最后一个<div> 1 秒后，但下次只有.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/