Eliminar divs antiguos si hay más de 20 | jQuery

Question

Necesito ayuda con mi script jQuery. Tengo una página que se renueva cada 10 segundos y se agregan nuevos divs de un feed.

Mi script cuenta los divs y elimina el último div cuando hay más de 20 divs. Esto funciona bien si el feed solo agrega 1 div a la vez. Pero el feed también puede agregar multiply divs al mismo tiempo. Cuando esto sucede, el conteo puede exceder el máximo de 20 divs. El problema con esto es que mi script simplemente borra 1 div y no todos los divs que exceden los 20 count.

Este es mi código:

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 

necesito para eliminar todos los divs adicionales por lo que siempre son 20 divs. Espero que alguien pueda ayudarme con esto.

Answer 1

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

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

    $autoUpdate(); 
}, 10000); 

notar el cambio de if a while. Esto mantiene la supresión de la anterior hasta que haya 20.

Answer 2

Uso del selector de greater than:

var $auto_refresh = setInterval(function() { 

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

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

Answer 3

var $auto_refresh = setInterval(function() { 

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

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

Answer 4

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

Answer 5

Usted podría utilizar .slice(x) para eliminar todos los elementos desde el índice x y sobre: ​​http://jsfiddle.net/PLKAm/.

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

Si hay <= 20 artículos entonces .slice(20) devuelve un conjunto vacío, por lo que el código es un no-op automáticamente.

Answer 6

Editado por simplicidad:

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

Answer 7

Uso jQuery.slice para tener todo pasado el número 20, y la bandeja de ellos - muertos fácil :)

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

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

Answer 8

Se podría utilizar el Selector :gt() para encontrar los elementos de una sola vez.

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 9

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