Erstellen Sie dynamische Textfeld-ID

Question

Ich möchte dynamische Textfeld-ID auf klicken Ereignis der Schaltfläche mit jquery erstellen. Ich habe eine Funktion erstellt, die drei Textfelder erstellt, wenn ich auf eine Schaltfläche klicke. Was ich benötige, ist, dass jedes Textfeld eine eindeutige ID haben sollte. Hier

ist die Funktion: -

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

} 

Dieser Code für mich zum ersten Mal gut funktioniert. Wenn ich diese Funktion zum zweiten Mal benutze, brauche ich eine andere ID (wie ring1, rqty1, runit1)

Answer 1

Sie sollten eine Art Inkrementwert eingeben, um zu verfolgen, wie oft die Taste gedrückt wurde (etwa var round = 0;). Dann können Sie für jedes Mal, wenn Sie die Eingaben hinzufügen, die IDs wie aussehen lassen.

Answer 2

Sie eine Klasse auf das erstellte Mutter div hinzufügen könnte (zum Beispiel <div class="col-md-12 createdBoxes">) und dann in der Funktion erhalten Sie die Anzahl dieser mit:

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

und fügen Sie dann diese Zahl auf die dynamisch erzeugten Felder id Also wäre jede ID wie id="qty'+number+'" und bei jedem Aufruf der Funktion würde die Länge zunehmen, so dass Sie einen Index der Anzahl der dynamisch erzeugten divs hätten.