jQuery clone с HTML-шаблоном

Question

Я видел несколько руководств по шаблонам jQuery, которые, насколько я понимаю, устарели, поэтому я пытаюсь использовать .Clone Я получил его, чтобы он работал нормально, когда я показываю только один результат, но когда я хочу показать полный список результатов, он не работает, я уверен, из-за моего плохого jQuery. Я хочу, чтобы клонировать весь класс .template заполнить его от каждого члена массива ответа, затем добавьте каждый вновь клонированной шаблон #fillresultsdiv, если кто-нибудь может помочь найти то, что я делаю неправильно

здесь JQuery:

    success: function (msg) { 
        var events = []; 
        var obj = $.parseJSON(msg.d); 
        $(obj.res).each(function() { 
         var newRow = $('.template').clone() 
         newRow.$('.day').text($(this).attr('day')), 
          newRow.$('.dayofweek').text($(this).attr('dayofweek')), 
          newRow.$('.month').text($(this).attr('month')), 
          newRow.$('.title').text($(this).attr('title')), 
          newRow.$('.time').text($(this).attr('time')), 
         newRow.$('.venue').text($(this).attr('venue')), 
         newRow.$('.description').text($(this).attr('description')) 
         $('#fillresultsdiv').append(newRow); 

Вот пример ответа:

d: "{"res":[{"day":"26","dayofweek":"Tue","month":"Jun","title":"Glen Hansard","venue":"Vic Theatre","time":"7:00 PM","ticketurl":"http://seatgeek.com/glen-hansard-t 

и вот мой шаблон HTML:

<div class="Template"> 
     <div class="accordian_head1"> 
     <div class="date_container"> 
      <a class="day"></a><br/><br/> 
      <a class="dayofweek"></a><br/> 
      <a class="month"></a> 
     </div> 
     <div class="title_container"> 
      <a class="title">Title</a> 
      <a class="venue"><br/></a><a class="time"></a> 
     </div> 
     <div class="links"> 
      <a href=" + dr(36).ToString() + ?aid=854">Buy Tickets</a><br/> 
      <a href="javascript:void(0)" onclick="fnAddToCalendar({ 'eventID' : ' dr(0).ToString() + '});">Watch</a><br/> 
     <a href="#">Email</a><br/> 
     <a href=""Calendar.aspx"">Calendar</a><br/> 
    </div> 
    </div> 
    <div class="accordian_body1new"><a class="description"></a> 
    </div> 

Это все #fillresultsdiv является

 <div id="fillresultsdiv"></div> 

Answer 1

// Parse the entire string, because `msg` is not an object, 
// so you can't use `msg.d` 
var obj = $.parseJSON(msg); 

$(obj.d.res).each(function() { 
    var newRow = $('.template').clone(); 

    // Now loop through the object 
    for (var prop in this) { 
     if (this.hasOwnProperty(prop)) { 

      // Lucky for you, the keys match the classes :) 
      $('.' + prop, newRow).text(this[ prop ]); 
     } 
    } 
    $('#fillresultsdiv').append(newRow); 
}); 

Но вы должны обязательно использовать DocumentFragment для ускорения манипуляции DOM и добавить все сразу , Потому что помните: DOM медленнее работает.

var obj = $.parseJSON(msg); 

// Create a DocumentFragment 
var el = document.createDocumentFragment(); 
$(obj.d.res).each(function() { 
    var newRow = $('.template').clone(); 
    for (var prop in this) { 
     if (this.hasOwnProperty(prop)) { 
      $('.' + prop, newRow).text(this[ prop ]); 
     } 
    } 

    // Append to the DocumentFragment 
    $(el).append(newRow); 
}); 

// And append the DocumentFragment to the DIV 
$('#fillresultsdiv').append(el); 

Answer 2

Попробуйте это:

  success: function (msg) { 
       var events = []; 
       var obj = $.parseJSON(msg.d); 
       $(obj.res).each(function() { 
        var newRow = $('.template').clone(); 
        newRow.find('.day').text($(this).attr('day')); 
        newRow.find('.dayofweek').text($(this).attr('dayofweek')); 
        newRow.find('.month').text($(this).attr('month')); 
        newRow.find('.title').text($(this).attr('title')); 
        newRow.find('.time').text($(this).attr('time')); 
        newRow.find('.venue').text($(this).attr('venue')); 
        newRow.find('.description').text($(this).attr('description')); 
        newRow.appendTo('#fillresultsdiv'); 
        }