Xóa các div cũ nếu có nhiều hơn 20 | jQuery

Question

Tôi cần trợ giúp về tập lệnh jQuery của mình. Tôi có một trang làm mới sau mỗi 10 giây và các div mới từ nguồn cấp dữ liệu được thêm vào.

Tập lệnh của tôi đếm số div và xóa div cuối cùng khi có hơn 20 div. Điều này hoạt động tốt nếu nguồn cấp dữ liệu chỉ nối thêm 1 div mỗi lần. Nhưng nguồn cấp dữ liệu cũng có thể nối thêm nhiều div cùng một lúc. Khi điều này xảy ra, số lượng có thể vượt quá tối đa 20 div. Vấn đề với điều này là kịch bản của tôi chỉ xóa 1 div và không phải tất cả các div vượt quá số lượng 20.

Đây là mã của tôi:

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 

tôi cần phải loại bỏ tất cả các div thêm nên luôn luôn có 20 divs. Tôi hy vọng ai đó có thể giúp tôi với điều này.

Answer 1

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

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

    $autoUpdate(); 
}, 10000); 

Chú ý sự thay đổi của if để while. Điều này sẽ giúp xóa người cuối cùng cho đến khi có 20.

Answer 2

Sử dụng selector 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

Bạn có thể sử dụng .slice(x) để loại bỏ tất cả các yếu tố từ chỉ số x và vào lúc: http://jsfiddle.net/PLKAm/.

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

Nếu có <= 20 mục sau đó .slice(20) trả về một tập rỗng, vì vậy mã là một không-op tự động.

Answer 6

Edited vì đơn giản:

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

Answer 7

Sử dụng jQuery.slice để có được tất cả mọi thứ qua số 20, và bin họ - chết dễ dàng :)

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

Bạn có thể sử dụng :gt() bộ chọn để tìm các yếu tố trong một ngã swoop.

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