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

我正在一个聊天室工作

我目前正在做很多这方面的工作：

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

每次I.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

必须是

.remove（）

的jQuery元素才能工作。您可以从如下HTMLElement创建jQuery元素：

$（HTMLElement）

这将比每次使用jQuery选择器查询DOM的性能更好。您可以使用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

必须是

.remove（）

的jQuery元素才能工作。您可以从如下HTMLElement创建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>

---

您没有提供您的标记，因此我仅提出了一个用于说明的标记：

<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>

---

好了：然后，

$（选择器）。首先（）.remove（）

，如果你想删除第一个。这里有一个想法：好了：然后，

$（选择器）。首先（）.remove（）

，如果你想删除第一个。这里有一个想法：我想你可能是指

shift

！非常好的想法我也同意这个答案-它工作得非常好-您注意到关于“jQuery元素”$（HtmleElement）很重要-因为我起初没有这样做，但现在它是金色的。我认为这可能是一个问题。现在人们通常认为一切都是jQuery。我想你可能是指那里的

shift

！非常好的想法我也同意这个答案-它工作得非常好-您注意到关于“jQuery元素”$（HtmleElement）很重要-因为我起初没有这样做，但现在它是金色的。我认为这可能是一个问题。现在人们通常认为一切都是jQuery。