Question

我有一个AJAX聊天应用程序，它不断获取新数据并以另一个div（.child）的形式将其附加到div（#container）。每秒可以插入多个.child，但我只想保留最新的10.每次下载时，我都会调用以下函数：

function cleanup(){
        var current = $('#container');
        var allData = current.children();
        if(allData.length > 10){
            for(var i = 0;i<allData.length-10;i++){
                allData[i].remove();
            }
        }   
    }

这很有效，但它可怕地落后了。我必须切换当前标签才能看到css正常工作。我做错了吗？

我无法更改数据流，因为聊天取决于获取所有已发送的数据。我只是在寻找删除旧元素的最有效方法。

示例：

如果我的div中有30个孩子，那么前20个孩子将是.remove()＆d;并且只剩下最后10个孩子。

Answer 1

而不是让一些代码添加div和清理函数后来清理它 - 如果我理解正确的话，可以添加一大堆子，而不仅仅是一个 - 为什么不能有效地在内存中有一个长度为10的队列，并继续推动（并在达到10件以上时将其从背面弹出），然后定期将这些孩子放在#container上。

通过这种方式，您总是可以获得最新的10个元素，但是您可以以合理的速率更新容器（因此可以将视觉文档重新转换为合理的速率）。

这可能是间隔时间，或者您甚至可以在每次处理消息时执行此操作 - 但关键是，您不是要添加到文档中，重新发送它，然后再次从中删除它。这似乎是解决问题的低效方法。

Answer 2

您可以使用:lt()选择器来限制目标最后一个div（如：lt选择器基于零索引）：

 $('#container .child:lt('+$('.child').length-11+')').remove();

也更好地替换内容而不是添加新内容。

Answer 3

CSS解决方案：

#container:nth-of-type(10) ~ #container {
    display: none;
}

删除子元素

3 个答案: