如何限制定期添加消息的DIV中的文本量？

Question

我有一個基於Web的程序，該程序定期從服務器（帶有Node.js和socket.io）接收一行文本消息，並將其附加到滾動DIV。 消息是簡單的文本； 例如“輸入切換失敗”。

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

當收到新郵件時，如何刪除較舊的郵件，以便將顯示的郵件限制為最近200條左右？

Answer 1

將消息包裝在一個元素中，對元素進行計數，如果超過200個，則刪除最后附加的元素（第一個）：

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

    if ( $('p', '#statusMessageDiv').length > 200 )
        $('p', '#statusMessageDiv').first().remove();
});

Answer 2

關於什么

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

假設statusMessageDiv包含<span>標記。 假設最老的位於樁的底部。

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

編輯：更新了提琴，刪除了第一個/最后一個項目： http : //jsfiddle.net/9ZKXY/1/

Answer 3

或者，您可以將一個javascript數組作為包含消息的字符串值的數據結構。 進行ajax調用以獲取具有JSON結果的新消息作為新消息的數組。 將數據結構數組與JSON結果數組的計數拼接在一起，以刪除所需的項。 然后將新項目添加到數據結構數組。 然后使用KnockoutJS或AngularJS之類的庫將Div綁定到數據結構。 這樣，當您向數據結構添加和刪除新項目時，渲染div就會相應顯示。

Answer 4

如果您需要保留現有結構，那么您要嘗試刪除的是第一行以及每行的其他內容。 “第一行”由兩個節點組成-文本節點和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