jquery / 在达到最大追加数后自动删除追加元素

jquery / auto delete appended elements after max appends reached

本文关键字：追加 元素 删除 jquery      更新时间：2023-09-26

我正在聊天室工作。

我目前正在做很多这样的事情：

$('#messages').append(readymsg);

我想在每次 .append(( 时添加某种函数，以便它会检查页面上加载了多少附加消息，如果超过一定数量，它会删除最旧的附加消息。

我基本上想确保我的应用程序不会因 1000 行附加消息而变得臃肿 - 并且始终最多有 200 行。这样，每次发生 .append(( 时，如果页面上已经附加了 200 条消息，它会删除最旧的消息，并添加最新的消息，因此仍然有 200 条消息。

提前感谢！

您可以使用FIFO(先进先出(队列。

创建一个数组。 并将对元素的引用存储在那里。 当达到 200 时，开始删除最旧的项目。

var queue = new Array();
function addMessage(msg)
{
    queue.push(msg);
    $('#messages').append(msg);
    if ( queue.length > 200 ) {
        var msgToRemove = queue.shift();
        msgToRemove.remove();
    }
}

比添加消息：

addMessage(readymsg);

请记住，readymsg必须是 jQuery 元素才能.remove()工作。 你可以从 HTML 创建一个 jQuery 元素，如下所示： $(htmlElement)

这将比每次使用 jQuery 选择器查询 DOM 表现得更好

您没有提供标记，所以我只是想出了一个用于说明目的：

<div id="messages">
    <div class="message">Chat message 1</div>
    <div class="message">Chat message 2</div>
    <div class="message">Chat message 3</div>
    <div class="message">Chat message 4</div>
    <div class="message">Chat message 5</div>
</div>
<button>New message</button>

可以使用length检查容器中的消息数：

$(function () {
    function addMessage() {
        var msgs = $('#messages .message');
        var count = msgs.length;
        if (count == 10) {
            msgs.first().remove();
        }
        $('<div />', {
            class: 'message'
        })
        .text('Chat message ' + (count + 1).toString())
        .appendTo($('#messages'));
    }
    $('button').on('click', addMessage);
});

演示

jQuery .length

jQuery .first((

jQuery .remove((

jQuery .appendTo((

相关文章：