Question

标记：

<div id="status">
    <div style="display: block;">Status OK - 16:57:09.</div>
    <div style="display: block;">Status OK - 16:57:09.</div>
    <div style="display: block;">Status OK - 16:57:05.</div>
    <div style="display: block;">Status OK - 16:57:05.</div>
    <div style="display: block;">Status OK - 16:57:03.</div>
    <div>No status yet.</div>
</div>

使用AJAX，我在状态div中添加了一个新的Div。我只想让五个div一直在里面。在第六个ajax类之后的含义，应删除最后一个div。

这是我的jQuery代码：

<script type="text/javascript">
    function Update() {
        PurgeOldStatuses();
        $("#status").children().first().hide().fadeIn();
    }

    function PurgeOldStatuses() {
        // From the status div, find all divs with index after 5, and remove them.
        $("#status").$("div:gt(5)").remove();
    }
</script>

我写了一篇评论来说明我认为正在发生什么，也许我错了。

目前尚未删除元素。有什么建议吗？

Answer 1

为了获得更好的性能，请避免使用:gt()等专有选择器，并且只使用有效的CSS选择器。

这应该很快：

$("#status").find("div").slice(5).remove();

或者这个：

$("#status div").slice(5).remove();

来自gt-selector^[docs]：

的文档

由于:gt()是jQuery扩展而不是CSS规范的一部分，因此使用:gt()的查询无法利用本机DOM querySelectorAll()方法提供的性能提升。 为了在现代浏览器中获得更好的性能，请改用$("your-pure-css-selector").slice(index)。

请注意，文档建议使用slice()^[docs]方法，该方法从您提供的从零开始的索引开始抓取集合中的所有元素。

Answer 2

。
$（ “＃状态”）找到（ “DIV：GT（4）”）。除去（）;

从元素#status开始，然后find查找与选择器#status匹配的所有后代（div:gt(4)）。然后remove摆脱它们。

它是4（不是5）的原因是，javascript是从零开始的 - 第一个元素是0.感谢Mark指出这一点。

jQuery的天才是链接 - 链中的每个函数都返回它传递的元素集，因此你可以“向下钻取”

Answer 3

这一行错了：

 $("#status").$("div:gt(5)").remove();

应该是：

 $("#status").find("div:gt(4)").remove();

编辑：$不是jQuery对象的属性或方法，但find是函数$（）返回的对象的方法。

Answer 4

 $("#status > div:gt(5)").remove();

Answer 5

使用最短选择器保留5个子div：

$("#status>div:gt(4)").remove();

在索引N之后使用jQuery删除div

5 个答案: