Javascript 如果有20个以上的jQuery，则删除旧div

我需要一些关于jQuery脚本的帮助。 我有一个页面，每10秒刷新一次，并且提要中的新div被追加到

我的脚本对div进行计数，并在div超过20个时删除最后一个div。如果提要一次只追加1个div，那么这就可以了。但是提要也可以同时附加多个div。发生这种情况时，计数可能超过最大20个div。问题是我的脚本只删除了1个div，而不是所有超过20个的div

这是我的代码：

var $auto_refresh = setInterval(function () {
    var $articleCount = $('div').length; 

    if ($articleCount > 20) {
        $('div:last-child').remove();
    }

    $autoUpdate();
}, 10000); // refresh every 10000 milliseconds for new items

我需要删除所有额外的div，以便始终有20个div。我希望有人能帮我解决这个问题

var $auto_refresh = setInterval(function () {
    var $articleCount = $('div').length; 

    while ($articleCount > 20) {
        $('div:last-child').remove();
        $articleCount = $('div').length;
    }

    $autoUpdate();
}, 10000);

注意将

if

更改为

while

。这会一直删除最后一个，直到有20个为止。

使用选择器：

var $auto_refresh = setInterval(function () {

    $('div:gt(20)').remove();

    $autoUpdate();
}, 10000); // refresh every 10000 milliseconds for new items

您可以使用从索引

x

和上删除所有元素：

如果为简单起见编辑了

：

$('div').each(function(count){
    if(count >= 20){
        $(this).remove();
    }
});

使用jQuery.slice使所有内容都超过数字20，并将它们放入垃圾箱-非常简单：）

您可以使用
：gt（）
选择器一次性查找元素

var $auto_refresh = setInterval(function () {
    var nToDelete = $('div').length - 20; // Calculate how many there are to delete...    
    if(nToDelete > 0) $('div:gt(" + nToDelete + ")').remove(); // and delete them.
    $autoUpdate();
}, 10000);

这不起作用，因为
$articlecount
在
期间实际上不会更新，而
；）抱歉，我认为-的情况就是这样，没有注意到您将其长度作为一个单独的变量，这是一个额外的处理过程：P即使只是使循环求值
$（'div'）。每次的长度将为您节省2个赋值操作，尽管它仍然在做一些不必要的事情：）我从来没有说过这是一种方法，只是一种方法，而且很简单。他不需要在循环体中更新
$articleCount
吗？
：gt
是一个jQuery过滤器，因此将它作为选择器的一部分使用将停止jQuery使用CSS引擎选择div，这意味着一个性能的打击。最好使用
$（'div'）.filter（':gt（20）
）或类似的（
.slice（）
）@TimBü性能很少是一个问题，但这不是编写草率代码的借口。没有人提到过这样一个事实，
：gt
会减慢选择的速度，所以我认为将其作为新信息发布到主题中没有问题。@Joe:我不会说这是草率的代码。它的精确性和可读性以及您建议的优化可以在jQuery内部进行，如果它有那么大的影响的话。然而，在我编写的这个小测试中，我看不到任何性能提升：。我是不是遗漏了什么？DOM结构简单吗？您可以简化它：有两个参数，第一个是索引，因此不需要使用count变量。
$("div").slice(20).remove();

$('div').each(function(count){
    if(count >= 20){
        $(this).remove();
    }
});

var $auto_refresh = setInterval(function () {
    $('div').slice(20).remove();
    $autoUpdate();
}, 10000); // refresh every 10000 milliseconds for new items

var $auto_refresh = setInterval(function () {
    var nToDelete = $('div').length - 20; // Calculate how many there are to delete...    
    if(nToDelete > 0) $('div:gt(" + nToDelete + ")').remove(); // and delete them.
    $autoUpdate();
}, 10000);

var remove21 = function() {
    if ($('div').length > 20) {
        $('div:nth-child(21)').remove();
        remove21();
    }
}

var $auto_refresh = setInterval(function () {

    remove21();

    $autoUpdate();
}, 10000); // refresh every 10000 milliseconds for new items