带有 HTML 模板的 jquery 克隆

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');
                  }