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

<script type="text/javascript">
    function trimNums(stringToTrim)
    {
        return stringToTrim.replace(/\d+$/,"");
    }
    function dupForm(divId, divClass, btnAdd, btnRm)
    {
    //alert(divId+'   '+divClass);
        var num     = $(divClass).length;
        var newNum  = new Number(num + 1);
        var i;
        var newElem = $('#' + divId + num).clone().attr('id', divId + newNum).fadeIn('slow');
        for (i=0; i < newElem.children().length; i++)
        {
            var attrId = trimNums(newElem.children(':eq('+i+')').attr('id'));
            var attrName = trimNums(newElem.children(':eq('+i+')').attr('name'));
            newElem.children(':eq('+i+')').attr('id', attrId + newNum).val('');
        }
        $('#' + divId + num).after(newElem);
        $('#' + btnRm).attr('disabled','');
        if (newNum == 15)
            $('#' + btnAdd).attr('disabled','disabled');
    }
    function rmForm(divId, divClass, btnAdd, btnRm)
    {
        var num = $(divClass).length;
        $('#' + divId + num).remove();
        $('#' + btnAdd).attr('disabled','');
        if (num-1 == 1)
            $('#' + btnRm).attr('disabled','disabled');
    }
</script>

---

为了提高效率，您建议使用哪一种方法？如果是#2，您可以建议我如何进行搜索并将[0]中出现的所有内容替换为[1]（[n]）。谢谢。

如果你写得合理，就不会那么冗长了：-）我可能只会使用克隆和附加。但是，您将获得重复的名称。如果您的后端能够正确处理“address[].street”，这并不是什么大问题，但可能不是，在这种情况下，您需要在克隆后进行清理。因此，我建议“将其隐藏在整洁的构建器函数中”

函数createAddress（索引）{
返回jQuery（replace（'\
\
\
\
\
\
\
“，{i:index}”）
}

其中replace是一个整洁的函数，它理解一个简单的插值映射。我更喜欢“将标记保存在看起来像标记的东西中”

---

在这里担心性能可能是没有道理的。

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

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

浏览器的本机

cloneNode（true）

方法要好得多，但是如果您正在执行jQuery的工作，就不能真正使用它，因为它会复制jQuery的内部ID，可能会混淆其脚本。啊。真是一团糟

---

b。当您更改输入的名称时，无论是通过此处的

input.name

，还是使用您的示例中的

attr（）

，IE中都存在一些问题我相信我正在经历同样的事情，并发现了一些类似这样的伟大来源：

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

<script type="text/javascript">
    function trimNums(stringToTrim)
    {
        return stringToTrim.replace(/\d+$/,"");
    }
    function dupForm(divId, divClass, btnAdd, btnRm)
    {
    //alert(divId+'   '+divClass);
        var num     = $(divClass).length;
        var newNum  = new Number(num + 1);
        var i;
        var newElem = $('#' + divId + num).clone().attr('id', divId + newNum).fadeIn('slow');
        for (i=0; i < newElem.children().length; i++)
        {
            var attrId = trimNums(newElem.children(':eq('+i+')').attr('id'));
            var attrName = trimNums(newElem.children(':eq('+i+')').attr('name'));
            newElem.children(':eq('+i+')').attr('id', attrId + newNum).val('');
        }
        $('#' + divId + num).after(newElem);
        $('#' + btnRm).attr('disabled','');
        if (newNum == 15)
            $('#' + btnAdd).attr('disabled','disabled');
    }
    function rmForm(divId, divClass, btnAdd, btnRm)
    {
        var num = $(divClass).length;
        $('#' + divId + num).remove();
        $('#' + btnAdd).attr('disabled','');
        if (num-1 == 1)
            $('#' + btnRm).attr('disabled','disabled');
    }
</script>

功能微调器（stringToTrim）
{
返回stringToTrim.replace（/\d+$/，“”）；
}
函数双重形式（divId、divClass、btnAdd、btnRm）
{
//警报（divId+“”+divClass）；
var num=$（divClass）.length；
var newNum=新的数字（num+1）；
var i；
var newElem=$（'#'+divId+num）.clone（）.attr（'id'，divId+newNum）.fadeIn（'slow'）；
对于（i=0；i

html代码是：

<form id="myForm" action="testingForm.php" method="post">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
    Part #: <input name="part[]" type="text" id="part1" size="10" maxlength="15" />
    Description: <input name="description[]" type="text" id="description1" size="30" maxlength="50" />
    Qty: <input name="quantity[]" type="text" id="quantity1" size="5" maxlength="5" />

第#部分：
说明：
数量：

---

这当然是一种更明智的方法：）我之所以倾向于克隆方法，是因为state实际上是一个选择字段，填充了一个状态列表，所以克隆似乎更容易。我可以在这里以类似的方式使用它并获取克隆div的html（），然后使用regex替换索引吗？这太完美了！感谢您对clone内部工作原理的解释，以及在IE中更改输入名称的问题的提醒。

<form id="myForm" action="testingForm.php" method="post">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
    Part #: <input name="part[]" type="text" id="part1" size="10" maxlength="15" />
    Description: <input name="description[]" type="text" id="description1" size="30" maxlength="50" />
    Qty: <input name="quantity[]" type="text" id="quantity1" size="5" maxlength="5" />