jquery - 在当前附加的元素上设置 ID

Question

我有一个<script type="text/template>用于创建新元素的内部 HTML。我怎样才能为这些创建的元素另外添加一个 ID？

<script type="text/template" id="element-template">
    <div class="element-container">
        <p>Template</p>
    </div>
</script>

期望的结果：

<div id="my-element" class="element-container">
   <p>Template</p>
</div>

以下代码有效，但我不想find('.element-container')在父级上使用，因为该类将来可能会更改：

var template = $('#element-template').html();
$('#output').append(template).parent().find('.element-container').attr('id', 'my-element');​

使用可以在这里找到一个 JSFiddle：http: //jsfiddle.net/RZrkB/1/

Answer 1

我会让template变量保存一个 jquery 对象而不是 html。

这样你就可以.clone()直接在上面添加一个id。

var template = $( $('#element-template').html() );

$('#output').append( template.clone().attr('id','my-element') );

演示在 http://jsfiddle.net/gaby/RZrkB/3/

Answer 2

如果您只需要为第一个子元素设置 id 属性，您可以使用 jQuery .children()来完成，如下所示：

var template = $('#element-template').html();
var $output = $('#output');
$output.append(template).children(':first').attr('id', 'my-element');​

示例：http: //jsfiddle.net/fewds/RZrkB/4/

Answer 3

您可以使用find('div:first')

$('#output').append($('#element-template').html())
.find('div:first').attr('id', 'my-element');​

例子。