我正在尝试克隆一个模板,该模板将填充数据,然后插入到表中。我目前能够在同一页面上使用相同的.clone()函数与其他元素,但jQuery拒绝查看和克隆模板(我猜是因为它不是块元素)。
以下是模板:
<tr id="search_result_temp" class="template">
<td class="logo">
<img class="logo" />
</td>
<td class="ratings">
<p id="rating"></p>
</td>
<td class="programs"></td>
<td class="actions">
<button id="request_info">Request Info</button>
<button id="save_school">Save</button>
</td>
<td class="compare"></td>
</tr>
以下是javascript代码:
for(var index in results){
var result = results[index];
$result_listing = $("#search_result_temp").clone().removeClass('template').attr('id', result.key);
$search_results.append($result_listing);
}
谢谢!
答案 0 :(得分:1)
找到答案。当模板<tr>
封装在<table>
和<div>
元素中时,clone()函数可以正常工作。如下所述.innerHTML(jQuery在clone()中使用)不能与表片段一起使用。这意味着如果jQuery是根元素(其父元素为<tr>
),jQuery将不会克隆<body>
。因此,模板应如下所示(当然,jQuery要选择<div>
上的相应ID):
<div>
<table>
<tr id="search_result_temp" class="template">
<td class="logo">
<img class="logo" />
</td>
<td class="ratings">
<p id="rating"></p>
</td>
<td class="programs"></td>
<td class="actions">
<button id="request_info">Request Info</button>
<button id="save_school">Save</button>
</td>
<td class="compare"></td>
</tr>
</table>
</div>
答案 1 :(得分:0)
for(var index in results){
var result = results[index];
$result_listing = $("#search_result_temp").clone().removeClass('template').attr('id', result.key);
$search_results.append($result_listing);
}
如果我错了,请纠正我,但为什么你需要
var result = results[index];
索引已经是结果的单个元素
答案 2 :(得分:0)
或者,您可以将模板包装在隐藏的DIV中,并通过jQueries HTML方法访问内容。在旁注中,您可能会碰撞使用相同ID克隆多个项目。尝试使用类方法并添加标识符(尝试新的HMTL5 data- *标记属性)。