javascript - 存储在变量中的 HTML 中的 jQuery 更改属性

Question

我想动态生成输入，但我需要给它们一个不同的输入名称。首先，我将 html 模板的内容放在变量中:

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

然后我添加一个索引，这样我就可以区分每个添加的输入 block :

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());

输入名称与我的"template"中的名称相同。

完整代码如下:

编辑:片段不工作但 fiddle 是: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'));
    });
	console.log($(question_html).html());

	$('#question_list').append(question_html);
	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 对象。

您应该创建一个 jQuery 对象来操作它，而不是创建 HTML 字符串。因为稍后您尝试访问 $(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());