如何在克隆之前使用 jQuery 编辑 HTML5 模板标签的内容？

Question

我目前正在尝试设置一个模板，我可以在 for 循环中填写并每次克隆。这是我目前所拥有的，可以很好地克隆模板 HTML，但我一直在尝试在克隆模板之前对其进行操作。

尝试在克隆上执行类似find() 的操作不起作用，我认为这与模板是#document-fragment 有关吗？

谁能给我一个关于如何做到这一点的 jQuery 示例？也许像在克隆模板之前操作 h1 标题这样简单？

<div class="template-holder"></div>

<template class="my-custom-template">
  <div class="example">
    <h1>Example</h1>  
    <h2>Example 2</h2>
    <div class="customDiv">Testing</div>
  </div>
</template>

Javascript：

var template = $('.my-custom-template');

var clone = template.clone();

$('.template-holder').append(clone.html());

JSFiddle 示例：

https://jsfiddle.net/Lmyyyb4k/2/

编辑：

看起来jQuery本身不支持文档片段：http://james.padolsey.com/stuff/jQueryBookThing/#doc-fragments

所以我想我必须将一些香草 JS 与 jQuery 结合起来。

Answer 1

如果您使用与模板不同的元素，它可以工作：

<div class="template-holder"></div>

<div class="my-custom-template" style="display:none">
  <div class="example">
    <h1>Example</h1>  
    <h2>Example 2</h2>
    <div class="customDiv">Testing</div>
  </div>
</div>

这将在克隆模板之前操纵模板中的 h1 标题：

var template = $('.my-custom-template');
template.find("h1").text("Changed H1 Title!");

var clone = template.clone();
$('.template-holder').append(clone);
clone.show();