jquery - 使用 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，您可以建议我如何进行搜索并将所有出现的 [0] 替换为 [1] ([n])。谢谢。

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

但是:

a. jQuery 的 clone()真是一件令人讨厌的工作。在 IE 上，它将节点序列化为 HTML，使用正则表达式 (!) 处理 HTML 字符串以删除其 bodge-job 内部 ID 属性，然后要求浏览器重新解析它。这是我最不喜欢的 jQuery 部分之一:它非常容易出错，会丢失一些信息，而且速度很慢(对于您在这里所做的相当小的工作来说，速度并不重要)。

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

b.当您更改输入的名称时，无论是 input.name如此处或使用 attr()如您的示例所示，IE<=7 中存在问题。

特别是，虽然它将提交具有正确控件名称的输入，但它们不会在 form.elements 中以正确的名称进行索引。 HTMLCollection(或 form 本身，但无论如何您都不应该使用它)。如果您根据 ID 或 jQuery 选择器而不是老式的 HTMLCollection 界面选择输入，这不一定是问题。更糟糕的是，单选按钮(如果您使用任何单选按钮)将无法正确进行名称分组。

如果您担心这个问题，恐怕可以使用 innerHTML/html()创建 div，就像 pst 的答案一样，是您唯一的选择。 (您始终可以将两者结合起来，使用 HTML 创建，然后使用 text() 、 attr() 、 val() 等更改其他属性和文本内容，以避免将文本字符串粘贴到 HTML 中时常见的 HTML 转义问题.)