jQuery的克隆與HTML模板

Question

我已經看到了幾個關於jQuery模板的教程，據我瞭解是outdataed，所以我試圖使用。克隆我得到它工作正常，當我只顯示一個結果，但當我想要顯示完整的結果列表時，它不起作用，我相信因爲我的糟糕的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'); 
        }