Question

我正在尝试克隆一个模板，该模板将填充数据，然后插入到表中。我目前能够在同一页面上使用相同的.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);
    }

谢谢！

Answer 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>

Answer 2

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];

索引已经是结果的单个元素

Answer 3

或者，您可以将模板包装在隐藏的DIV中，并通过jQueries HTML方法访问内容。在旁注中，您可能会碰撞使用相同ID克隆多个项目。尝试使用类方法并添加标识符（尝试新的HMTL5 data- *标记属性）。

使用jQuery的clone（）函数重复/克隆元素

3 个答案: