在当前附加的元素上设置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

如果你只需要为第一个子元素设置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 2

我会让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 3

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

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

Example