javascript - 追加 div 时，如果超过 10 个，则删除较旧的追加 div

Question

考虑以下 JQuery 循环。它附加了这个：

"<div id='1'>" + feedback + "</div>"

第一个问题。我想在附加第一个 div 后增加附加 div 的 id，以便第一个附加 div 的 id 为 1，第二个 div 的 id 为 2，依此类推。

第二个问题。当 div 的数量达到 10 时，我想删除第一个附加的 div。在我们的例子中是：

<div id="1">php result</div> 

这应该继续循环和删除旧的 div。

这是 Jquery ajax 循环：

new get_fb(); 
function get_fb(){
    var feedback = $.ajax({
        type: "POST",
        url: "algorithm.php",
        async: false
    }).success(function(){
        setTimeout(function(){get_fb();}, 8000);
    }).responseText;
    $('#BuzFeed').append("<div id='1'>" + feedback + "</div>");
}

Answer 1

用于计数：

var get_fb = (function() {
    var counter = 1;
    return function(){
        var feedback = $.ajax({
            ...
        }).responseText;
        $('#BuzFeed').append("<div id='" + counter + "'>" + feedback + "</div>");
    }
})();
get_fb();

并自动删除，之后

var $buzfeed = $('#BuzFeed').append("<div id='" + counter + "'>" + feedback + "</div>");

添加

var $buzfeedDivs = $buzfeed.children('div');
if ($buzfeedDivs.length > 10) { $buzfeedDivs.first().remove(); }

此外，您的代码使用了一些不太好的做法。重写，包括我的补充将是：

var get_fb = (function() {
    var counter = 0;
    var $buzfeed = $('#BuzFeed');
    return function(){
        $.ajax({
            type: "POST",
            dataType: "html", // based on chat
            url: "algorithm.php"
        }).done(function(feedback) {
            counter += 1;
            var $buzfeedresults = $("<div id='BuzFeedResult" + counter + "'></div>");
            $buzfeedresults.text(feedback);
            $buzfeed.append($buzfeedresults);
            var $buzfeedDivs = $buzfeed.children('div');
            if ($buzfeedDivs.length > 10) { $buzfeedDivs.first().remove(); }
            setTimeout(get_fb, 8000);
        }).fail(function(jqXhr, textStatus, errorThrown) {
            var $buzfeedresults = $("<div id='BuzFeedError'></div>");
            $buzfeedresults.text('Error: ' + textStatus);
            if (typeof console !== 'undefined') {
                console.error(jqXhr, textStatus, errorThrown);
            }
        });
    };
})();
get_fb();