克隆输入框

Question

您好，我有一个输入框需要克隆多达六次，根据.clone()函数，我可以做到这一点，但如果必须更改输入名称，如何做到这一点。

http://api.jquery.com/clone/

<label for="input">
 <input name="input" id="input" type="text">
</label>

<a href="#" onClick="cloneInput()">Add Another Input</a>

因此，假设当创建一个新的输入时，它应该在每次克隆对象时向名称和id添加一个增量，即：name="input2"、id="input2"等等。

有没有人对使用jQuery做这件事的最好/最简单的方法有什么建议？

Answer 1

首先，不使用clone，而是使用jQuery删除内联事件处理，您可以尝试这样做。

标记

<div id="inputContianer">
   <label for="input">
     <input name="input" id="input" type="text">
   </label>
</div>

<a class="cloneInput" href="#">Add Another Input</a>

JS

$(function(){
   var count = 1;
   $('a.cloneInput').click(function(){
       var id = 'input' + (count++);
       $('<label />', { for: id })
       .append($('<input />', { id: id, name: id, type: "text" }))
       .appendTo('#inputContianer');

       return false;
   });
});

Answer 2

在cloneInput函数中，您可以将属性值分配给元素，如下所示：

$('input').last().attr('name', 'a_new_name');

这个例子会找到你的最后一个输入域，并给它一个新的名字。it、值等也是如此。查找一下：http://api.jquery.com/attr/

或者正如James指出的，它也直接在clone()之后工作：

$('#clone_me').clone().attr('id', 'im_the_clone');

Answer 3

它似乎是这样工作的：

<script>
    var c = 1;
    function cloneInput() {
        $('#input')
              .clone()
              .attr('id', 'input'+c)
              .attr('name', 'input'+c)
              .appendTo('#clones')
              .wrap('<label for="input'+c+'"/>');
        c++;
    }
</script>

<label for="input">
 <input name="input" id="input" type="text">
</label>

<a href="#" onClick="cloneInput()">Add Another Input</a>

<div id="clones"></div>