動的テキストボックスIDを作成する

Question

jqueryを使用してボタンのクリックイベントに動的テキストボックスIDを作成したい。私は、ボタンをクリックすると3つのテキストボックスを作成する関数を作成しました。私が必要とするのは、すべてのテキストボックスに固有のIDが必要です。ここで

は、関数である： -

function CreateTextBox(value) { 
    return '<div class="col-md-12"><div class="col-md-3"><label>Ingredients</label><input class="form-control"name = "text1" id="ring" type="text" value = "' + value + '" />&nbsp;</div>'+ 
    '<div class="col-md-3"><label>Quantity</label><input class="form-control"name = "text2" type="text" id="rqty" value = "' + value + '" />&nbsp;</div>'+ 
    '<div class="col-md-3"><label>Measure Unit</label><input class="form-control"name = "text3" id="runit" type="text" value = "' + value + '" />&nbsp;</div>'+ 
    '<div class="col-md-3"><input type="button" value="Remove" class="btn btn-info remove" id="rm"/></div></div>' 

} 

このコードは、最初に私のために正常に動作します。この関数を2回目に実行すると、別のID（ring1、rqty1、runit1など）が必要になります。

Answer 1

ボタンを何回押したかを記録するために何らかのインクリメント値を設定する必要があります（var round = 0; ）。次に、入力を追加するたびにIDを'id="rqty'+ round+ '"'のようにすることができます。

Answer 2

あなたは（たとえば<div class="col-md-12 createdBoxes">用）作成した親のdivにクラスを追加することができ、その後、関数内では、これらの使用の数を取得：

var number=$('.createdBoxes').length+1; 

をして、動的に作成されたフィールドIDにその番号を追加各IDはid="qty'+number+'"のようになり、関数の呼び出しごとに長さが増え、動的に作成されたdivの数のインデックスが得られます。