我正在寻找一种有效的方式克隆/重命名或重新创建地址字段,以提供在同一页面上提交多个地址的能力.所以用这样的表单示例：
<div id="addresses">
<div class="address">
<input type="text" name="address[0].street">
<input type="text" name="address[0].city">
<input type="text" name="address[0].zip">
<input type="text" name="address[0].state">
</div>
</div>
<a href="" id="add_address">Add address form</a>
从我可以理解的是,有两个选择：
>按字段重新创建表单域,并增加一种冗长的索引：
var index = $(".address").length;
$('<`input`>').attr({
name: 'address[' + index + '].street',type: 'text'
}).appendTo(...);
$('<`input`>').attr({
name: 'address[' + index + '].city',type: 'text'
}).appendTo(...);
$('<`input`>').attr({
name: 'address[' + index + '].zip',type: 'text'
}).appendTo(...);
$('<`input`>').attr({
name: 'address[' + index + '].state',type: 'text'
}).appendTo(...);
>克隆现有图层并替换克隆中的名称：
$("div.address").clone().appendTo($("#addresses"));
您建议使用哪一个更有效率,如果您的#2可以建议我如何去搜索并用[1]([n])替换所有出现的[0].谢谢.
解决方法
在理论上,最简单的方法是克隆然后更改名称：
var newaddress= $("#addresses div.address").eq(0).clone();
newaddress.find('input').each(function() {
this.name= this.name.replace('[0]','['+i+']');
});
$('#addresses').append(newaddress);
然而：
一个. jQuery的clone()是一个非常讨厌的工作.在IE上,它将节点序列化为HTML,使用正则表达式(！)处理HTML字符串以删除其身份验证内部ID属性,然后要求浏览器重新解析它.这是jQuery中最不喜欢的部分之一：它非常容易出错,丢失一些信息,并且速度很慢(而不是速度对于您在这里做的相当小的工作而言非常重要).
浏览器的本机cloneNode(true)方法要好得多,但是如果你正在做jQuery的东西,那么你将无法真正使用它,因为它会复制jQuery的内部ID,这可能会混淆其脚本.啊.真是一团糟.
湾当您更改输入的名称时,无论是通过input.name在这里还是使用attr()作为示例,IE< = 7中都有问题. 特别是,尽管它将以正确的控件名称提交输入,但是它们将不会在form.elements HTMLCollection(或表单本身,即使您不应该使用它)的正确名称下索引.如果您根据ID或jQuery选择器选择输入,而不是老式的HTMLCollection界面,这不一定是问题.更糟的是,单选按钮,如果你使用任何,将不会被正确的名称分组. 如果这是一个关心的问题,我恐怕使用innerHTML / html()来创建div,如pst的答案,是你唯一的选择. (您可以随时组合两者,使用HTML创建,然后使用text(),attr(),val()等更改其他属性和文本内容,以避免在将文本字符串粘贴到HTML中时出现常见的HTML转义问题.)
