在變量中存儲HTML的jQuery更改屬性

Question

我想動態生成輸入，但我需要給它們一個不同的輸入名稱。 首先，我把我的HTML模板的變量中的內容：

var template = $("#question_template").html(); 

然後我添加一個索引，所以我可以分辨的投入每增加一個塊：

var question_html = "<div id='question_" + indice_question + "'>" + template + "</div>"; 

但現在我正在努力改變輸入的名稱是這樣的：

$(question_html).find('input').each(function(){ 
    $(this).attr('name','question[question'+indice_question+']'+$(this).attr('name')); 
}); 

問題是我的question_html在這個過程中沒有更新，當我做

console.log($(question_html).html()); 

輸入名稱與我的「模板」中的名稱相同。

下面是完整的代碼：

編輯：段不能正常工作，但小提琴是：http://jsfiddle.net/W4Km8/7085/

indice_question = 0; 
 

 
$('#add_question').on('click',function(){ 
 

 
    var template = $("#question_template").html(); 
 
    var question_html = "<div id='question_" + indice_question + "'>" + template + "</div>"; 
 

 
    $(question_html).find('input').each(function() { 
 
     $(this).attr('name','question[question'+indice_question+']'+$(this).attr('name')); 
 
     console.log($(this).attr('name')); 
 
    }); 
 
\t console.log($(question_html).html()); 
 

 
\t $('#question_list').append(question_html); 
 
\t indice_question++; 
 

 
});

<div id="question_list"> 
 
</div> 
 

 
<button type="button" id="add_question">Add question</button> 
 

 
<div id="question_template" style="display:none"> 
 
    <label for="question_content">Question content</label> 
 
    <input type="text" name="[question_content]"/><br/> 
 
    <input type="hidden" name="[id_question]" value=""/> 
 
</div>

Answer 1

每$(question_html)將是一個不同的jQuery對象。

而不是創建HTML字符串，你應該創建一個jQuery對象來操縱它。因爲當你以後試圖訪問$(question_html)時，它只是另一個jQuery對象而不是前一個。現在

var question_html= $("<div id='question_"+indice_question+"'>" + template + "</div>"); 

question_html.find('input').each(function(){ 
      $(this).attr('name', 'question[question' + indice_question +']' + $(this).attr('name')); 
}); 

時，你會做的控制檯日誌，名稱將改爲

console.log(question_html.html());