1

我有一个基于 Web 的程序，它定期从服务器（使用 Node.js 和 socket.io）接收一行文本消息，并将其附加到滚动 DIV。消息是简单的文本；例如，“输入切换失败”。

socket.on('statusMessage', function (newMessage) {
  $('#statusMessageDiv').append(newMessage + "<br>");
});

当有新消息出现时，如何删除旧消息，以便将显示的消息限制为最后 200 条左右？

4

4 回答 4

3

将消息包装在一个元素中，对元素进行计数，如果超过 200 个，则删除最后附加的（第一个）：

socket.on('statusMessage', function (data) {
    $('<p />', {text : newMessage}).appendTo('#statusMessageDiv');

    if ( $('p', '#statusMessageDiv').length > 200 )
        $('p', '#statusMessageDiv').first().remove();
});
于 2013-05-14T14:18:07.860 回答
2

关于什么

$("#statusMessageDiv span:gt(200)").remove()（可能是 199 从零开始！）

假设 statusMessageDiv 包含<span>标签。这假设最老的在堆的底部。

基本原理的示例小提琴：http: //jsfiddle.net/9ZKXY/

编辑：更新小提琴删除第一个/最后一个项目：http: //jsfiddle.net/9ZKXY/1/

于 2013-05-14T14:22:15.157 回答
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
于 2013-05-14T15:07:38.737 回答
1

或者，您可以将 javascript 数组作为包含消息字符串值的数据结构。执行 ajax 调用以获取带有 JSON 结果的新消息作为新消息的数组。将数据结构数组与 JSON 结果数组的计数拼接以删除所需的项目。然后将新项目添加到数据结构数组中。然后使用 KnockoutJS 或 AngularJS 之类的库将您的 Div 绑定到数据结构。这样，当您向数据结构添加和删除新项目时，您的渲染 div 将相应地显示。

于 2013-05-14T14:36:45.660 回答