在當前添加的元素上設置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 a ttribute對於使用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');​ 

Example。