我有一个基于 Web 的程序,它定期从服务器(使用 Node.js 和 socket.io)接收一行文本消息,并将其附加到滚动 DIV。消息是简单的文本;例如,“输入切换失败”。
socket.on('statusMessage', function (newMessage) {
$('#statusMessageDiv').append(newMessage + "<br>");
});
当有新消息出现时,如何删除旧消息,以便将显示的消息限制为最后 200 条左右?
我有一个基于 Web 的程序,它定期从服务器(使用 Node.js 和 socket.io)接收一行文本消息,并将其附加到滚动 DIV。消息是简单的文本;例如,“输入切换失败”。
socket.on('statusMessage', function (newMessage) {
$('#statusMessageDiv').append(newMessage + "<br>");
});
当有新消息出现时,如何删除旧消息,以便将显示的消息限制为最后 200 条左右?
将消息包装在一个元素中,对元素进行计数,如果超过 200 个,则删除最后附加的(第一个):
socket.on('statusMessage', function (data) {
$('<p />', {text : newMessage}).appendTo('#statusMessageDiv');
if ( $('p', '#statusMessageDiv').length > 200 )
$('p', '#statusMessageDiv').first().remove();
});
关于什么
$("#statusMessageDiv span:gt(200)").remove()
(可能是 199 从零开始!)
假设 statusMessageDiv 包含<span>
标签。这假设最老的在堆的底部。
基本原理的示例小提琴:http: //jsfiddle.net/9ZKXY/
编辑:更新小提琴删除第一个/最后一个项目:http: //jsfiddle.net/9ZKXY/1/
如果您需要保留现有结构,那么您要删除的内容是第一行加上每一行。“第一行”由两个节点组成——一个文本节点和一个br节点。所以我们可以在追加 newMessage 时过滤掉它们
socket.on('statusMessage', function (newMessage) {
var i = 0;
$('#statusMessages').append(newMessage + "<br/>")
.contents()
.filter(function () {
i++;
return i <= 2 ? this : false; // 2 because one text node and one br node
})
.remove();
}); // end on statusMessage
或者,您可以将 javascript 数组作为包含消息字符串值的数据结构。执行 ajax 调用以获取带有 JSON 结果的新消息作为新消息的数组。将数据结构数组与 JSON 结果数组的计数拼接以删除所需的项目。然后将新项目添加到数据结构数组中。然后使用 KnockoutJS 或 AngularJS 之类的库将您的 Div 绑定到数据结构。这样,当您向数据结构添加和删除新项目时,您的渲染 div 将相应地显示。