我有一个 for 循环,它迭代一些 JSON 数据,对于每个 JSON 对象,我需要输出一大块 HTML,如下所示:
<div class="hotel-result independent">
<div class="col-xs-12 col-sm-12 col-md-8">
<div class="hotel-type"><span class="independent">Independent Garage</span></div>
<h3>Hotel Name</h3>
<div class="meta-info">
<span class="distance">
<i class="fonticon-map-marker"></i>
1.6 miles from N1 2NL
</span>
<span class="telephone hidden-xs">
<i class="fonticon-telephone2"></i>
92358023523
</span>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="service">Room</div>
<div class="price-wrap">
<span class="currency">£</span>
<span class="price">30.95</span>
<span class="vat small">inc VAT</span>
</div>
<a class="button teal has-icon-right" href="#">
Book online
<i class="fonticon-chevron-right"></i>
</a>
<a href="" class="button light-grey has-icon-right phone-booking hidden-sm hidden-md hidden-lg">
Touch to call
<i class="fonticon-telephone2"></i>
</a>
</div>
</div>
</div>
酒店名称、距离、邮政编码等元素需要从 JSON 数据中输出。
我正在尝试找出最好的方法来做到这一点,因为用纯 javascript、document.createElement/appendChild 等编写它,看起来很冗长,我想知道是否有更好/更干净的方法?
我在网上找到了其他示例,但仅限于 HTML 量非常小的情况,或者不需要将数据传递到输出的 HTML 中。任何建议将不胜感激。
-------- JSON 数据示例 --------
[{
id: 0
name: Hotel Name
postcode: N1 2NL
lat: latitude
lng: Longitude
hotel_type: independent
room_prices: [
{ id:35235325
room_type: king
room_price: 356.0
}
{ id:23532523
room_type: single
room_price: 50.0
}
]
}]
这只是 JSON 类型的一个简单示例。
最佳答案
model
是你解析后的 json 数组
var pattern, nodes = $();
for(var i=0,size=model.length; i<size; i++){
pattern = createHotelPattern(model[i]);
nodes = nodes.add($(pattern));
};
$('#myNodeSelector').append(nodes);
这是模式创建者:
function createHotelPattern (data) {
var pattern = [
'<div class="hotel-result ',
data.hotel_type,
'">',
'<div class="col-xs-12 col-sm-12 col-md-8">',
'<div class="hotel-type">',
'<span class="independent">Independent Garage</span>',
'</div>',
'<h3>',
data.name,
'</h3>',
'<div class="meta-info">',
'<span class="distance"> <i class="fonticon-map-marker"></i>',
'1.6 miles from ',
data.postcode,
'</span>',
'<span class="telephone hidden-xs"> <i class="fonticon-telephone2"></i>',
data.phone,
'</span>',
'</div>',
'</div>',
'<div class="col-xs-12 col-sm-12 col-md-4">',
'<div class="service">',
data.currency,
'</div>',
'<div class="price-wrap">',
'<span class="currency">',
data.room_type,
'</span>',
'<span class="price">',
data.room_price,
'</span>',
'<span class="vat small">',
'inc VAT',
'</span>',
'</div>',
'<a class="button teal has-icon-right" href="#">',
'Book online',
'<i class="fonticon-chevron-right"></i>',
'</a>',
'<a href="" class="button light-grey has-icon-right phone-booking hidden-sm hidden-md hidden-lg">Touch to call<i class="fonticon-telephone2"></i></a>',
'</div>',
'</div>'
];
return pattern.join('');
}
关于javascript - 在 Javascript/jQuery 中添加带有变量的大块 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35864387/