使用jQuery克隆和重命名表单元素

Question

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

<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>

根据我的理解,有两种选择:

1. 按字段重新创建表单字段并递增索引,这是一种详细的:

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

2. 克隆现有图层并替换克隆中的名称:

   $("div.address").clone().appendTo($("#addresses"));
   

你建议使用哪一个更高效,如果它的#2可以请你建议我如何进行搜索并用[1]([n])替换所有出现的[0].谢谢.

Answer 1

理论上,最简单的方法是克隆然后更改名称:

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,使用regex(!)处理HTML字符串以删除其bodge-job内部ID属性,然后要求浏览器重新解析它.这是我最不喜欢的jQuery部分之一:它非常容易出错,丢失一些信息,并且速度很慢(不是说速度对于你在这里做的非常小的工作很重要).

浏览器的本机cloneNode(true)方法要好得多,但是如果你正在做jQuery的话,你就不能真正使用它,因为它会复制jQuery的内部id,可能会混淆它的脚本.啊.真是一团糟.

湾 当您更改输入的名称时,无论是input.name在此处还是attr()在示例中使用,都会出现IE <= 7中的问题.

特别是,虽然它将使用正确的控件名称提交输入,但它们不会在form.elementsHTMLCollection中以正确的名称编制索引(或者就form其本身而言,尽管您不应该使用它).如果您选择基于ID或jQuery选择器的输入而不是旧式HTMLCollection接口,则这不一定是个问题.更糟糕的是,如果您使用任何按钮,则单选按钮将无法正确命名.

如果这是你关注的问题,我恐怕使用innerHTML/ html()创建div,就像在pst的答案中一样,是你唯一的选择.(您可以随时将二者结合起来,使用HTML然后使用更改其他属性和文本内容创建text(),attr(),val()等,以避免当你去坚持围绕文本字符串转换成HTML通常HTML转义的问题.)