入力ボックスをクローニングする

Question

こんにちは私は入力ボックスを.clone（）関数に従って最大6回クローンする必要がありますが、これを行うことはできますが、入力名を変更する必要がある場合、これを行う方法。

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

まず、使用の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'); 

この例では、あなたの最後の入力フィールドを見つけ、ANそれに新しい名前を割り当てます。 http://api.jquery.com/attr/

それともジェームズが指摘したように、それは（クローン直後に動作します）を過ぎる：IDSのために、値などがそれを見て、同じ作品のすべての

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