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>

所以，我需要每隔<div>从#box移除.prepend，并通过ajax删除<div>新div。但是这段代码仅在第一秒才有效。即在页面加载后{1}}从#box移除了{1}}后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/

JQuery删除：last-child和.prepend

1 个答案: