克隆输入框

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> 

所以我们可以说，当一个新的输入创建它应该添加一个增量的名称和编号，即：name="input2"id="input2"等，每次对象被克隆。

任何人有任何建议，最好/最简单的方法来做到这一点与jQuery？

Answer 1

首先删除内嵌事件处理使用jQuery和而不是使用clone你可以试试这个。

标记

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

这个例子会发现你的最后一个输入字段中指定一个新的名称。为ID的同一作品，价值观等等看它：http://api.jquery.com/attr/

或者像詹姆斯指出的那样，克隆后直接运行（）太：

$('#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>