追加不追加內容，但用它

Question

我使用jQuery的.load函數加載來自服務器的結果，並在我的HTML追加它：

$("#content").load('Get/classPosts?class=arts&min=1', function (responseText, textStatus, XMLHttpRequest) { 
arr = $.parseJSON(responseText); 
for (i = 1; i < arr.length; i++) { 
    if (arr[i] != null) { 
     $('#content').append("<section class='contentpost'><div class='contentimg'><a href='" + arr[i][0] + "'><img src='" + arr[i][2] + "'/></a> </div><div class='contenttitle title'><a href='" + arr[i][0] + "'>" + arr[i][1] + "</a></div></section>").slideDown(100); 
    } 
} 
}); 

至於取並通過.load的數據的外觀而言其精細，但也有我與這個面臨幾個問題：

• 最重要的是，它實際上不是 的#content結束追加新的數據，但它僅僅是替換現有的HTML 與新的一個。

• 而且在#content頂部插入新的數據之前，有正在顯示原始JSON字符串，像這樣：

  [ 
  ["93","Title-1","http://stackoverflow.com"], 
  ["92"," Title-2","http://stackoverflow.com"], 
  ["90"," Title-3","http://stackoverflow.com"], 
  ["89"," Title-4","http://stackoverflow.com"], 
  ["89"," Title-5","http://stackoverflow.com"], 
  null,null,null,null,null] 
  

我不知道爲什麼會出現頁面上。

但是，這將是一個小問題，但我會appericiate如果有人也可以幫我.slideDown(100);功能在最後，我希望每個新的內容出來動畫滑下來，但它也不工作。

謝謝！

Answer 1

load()這是默認情況下。當您首先撥打load時，您告訴它將替換#content div內的html。您需要使用GET或POST來檢索信息，然後將其附加到#content。

事情是這樣的：

$.get('Get/classPosts?class=arts&min=1', function (data) { 
    if(data.length > 0) { 
     arr = $.parseJSON(data); 
     var newId; 
     for (i = 1; i < arr.length; i++) { 
      if (arr[i] != null) { 
       // unique id for slidedown to work 
       newId = $('.contentpost').length; 
       $('#content').append("<section id='contentpost-"+newId+"' class='contentpost'><div class='contentimg'><a href='" + arr[i][0] + "'><img src='" + arr[i][2] + "'/></a> </div><div class='contenttitle title'><a href='" + arr[i][0] + "'>" + arr[i][1] + "</a></div></section>"); 
       // slide down pointing to the newly added contentposts only 
       $('#contentpost-'+newId).slideDown(100); 
      } 
     } 
    } 
}); 

什麼，你也需要做的是設置contentpost類的隱藏在CSS中，是這樣的：

.contentpost { 
    display:none; 
} 

你需要這個或了slideDown贏得」工作。 div需要隱藏。