如果超过 20 个，则删除旧的 div | jQuery

Question

我的 jQuery 脚本需要一些帮助。 我有一个每 10 秒刷新一次的页面，并且会附加来自 feed 的新 div。

我的脚本对 div 进行计数，并在超过 20 个 div 时删除最后一个 div。如果 feed 一次仅附加 1 个 div，则此方法效果很好。但 feed 也可以同时附加多个 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。我希望有人能帮助我解决这个问题。

Answer 1

使用 jQuery.slice 获取超过 20 的所有内容，并将它们装箱 - 非常简单:)

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

http://api.jquery.com/slice/

Answer 2

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

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

    $autoUpdate();
}, 10000);

请注意 if 更改为 while。这会不断删除最后一个，直到有 20 个。

Answer 3

您可以使用 .slice(x) 删除索引 < 中的所有元素code>x 以及：http://jsfiddle.net/PLKAm/。

$("div").slice(20).remove();

如果有 <= 20 项，则 .slice(20) 返回一个空集，因此该代码自动为空操作。

Answer 4

使用 大于 选择器：

var $auto_refresh = setInterval(function () {

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

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

Answer 5

var $auto_refresh = setInterval(function () {

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

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

Answer 6

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

Answer 7

您可以使用 :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);

Answer 8

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

Answer 9

为简单起见编辑：

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