Append не добавляя содержание, но заменив его

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, вы говорите ему, чтобы заменить html внутри div #content. Вы должны использовать 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 выиграл» т работы. Деб должен быть скрыт.