用jQuery克隆并重命名表单元素

我正在寻找一种有效的方式克隆/重命名或重新创建地址字段,以提供在同一页面上提交多个地址的能力.所以用这样的表单示例：

<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转义问题.)

原文地址：https://www.jb51.cc/jquery/179987.html

用jQuery克隆并重命名表单元素

解决方法

相关推荐