如何限制定期向其添加消息的DIV中的文本数量?

How can I limit the amount of text in a DIV that I periodically add messages to?

本文关键字：DIV 文本 消息 何限制 添加      更新时间：2023-09-26

我有一个基于web的程序，定期从服务器(与Node.js和socket.io)接收一行文本消息，我附加到滚动的div。消息是简单的文本;例如，"Input switch failed"。

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/

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

如果您需要保留现有的结构，那么您要尝试删除的是带有每个附加行的第一行。"第一行"由两个节点组成——文本节点和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
相关文章：