在附加div時，刪除較舊的附加div時，有多於10

Question

請考慮以下JQuery循環。它附加這個：

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

第1個問題。 我想增加第一個附加後附加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();