[英]jquery clone with HTML template
我已經看過一些關於jQuery模板的教程,據我所知,它是outdataed,所以我試圖使用.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>
嘗試這個:
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');
}
// 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 );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.