Runde Array umkehren, Eingabe Textfelder anhängen und Werte dieser Textfelder setzen

Question

Ich versuche, eine Schleife zu bilden und eine Anzahl von Containern basierend auf den in einem Array gespeicherten Werten anzufügen, dann setze diese Werte entsprechend, aber ich bin gerade dabei diese zu duplizieren Werte und können nicht die Werte für jedes Mal anders sein, wenn es um die Schleife geht.

var arr_tele = ['02991812376', '02982919291']; 
 

 
//Prevent Duplicates. 
 
$(".teledivcontain").remove(); 
 

 
//Append Container for numbers 
 
$("#telediv").append('<div class="form-group col-md-3" id="teledivcontain"> </div>'); 
 

 
//Loop and append fields for each number 
 
for (i in arr_tele) { 
 
    $("#teledivcontain").append('<input type="text" class="form-control telenumber" placeholder="No number currently" disabled><div class="form-group col-md-3"><button type="submit" class="btn btn-primary form-control detach">Detach</button></div>').find('input:text').val(arr_tele[i]); 
 
}

.fieldpos { 
 
    margin-left: 45px; 
 
    width: 40%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="panel-body row fieldpos"> 
 
    <fieldset class="form-group"> 
 
    <label for="telenum">Your Telephone Numbers</label> 
 
    <div class="row"> 
 
     <div id="telediv"> 
 
     </div> 
 
    </div> 
 
    </fieldset> 
 
</div>

mir fehlt etwas kleinere, aber kann nicht sehen, was irgendwelche Ideen anyone?

Answer 1

Sie haben die letzte Eingabe finden hängten dann den Wert zuweisen, so dass das Hinzufügen nur die :last Selektor wird die Arbeit tun:

.find('input:text:last').val(arr_tele[i]) 

Oder Sie können den Wert direkt mit <input value="'+arr_tele[i]+'" ... zuweisen.

Hoffe, das hilft.

var arr_tele = ['02991812376', '02982919291']; 
 

 
//Prevent Duplicates. 
 
$(".teledivcontain").remove(); 
 

 
//Append Container for numbers 
 
$("#telediv").append('<div class="form-group col-md-3" id="teledivcontain"> </div>'); 
 

 
//Loop and append fields for each number 
 
for (i in arr_tele) { 
 
    $("#teledivcontain").append('<input type="text" class="form-control telenumber" placeholder="No number currently" disabled><div class="form-group col-md-3"><button type="submit" class="btn btn-primary form-control detach">Detach</button></div>').find('input:text:last').val(arr_tele[i]); 
 
}

.fieldpos { 
 
    margin-left: 45px; 
 
    width: 40%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="panel-body row fieldpos"> 
 
    <fieldset class="form-group"> 
 
    <label for="telenum">Your Telephone Numbers</label> 
 
    <div class="row"> 
 
     <div id="telediv"> 
 
     </div> 
 
    </div> 
 
    </fieldset> 
 
</div>

Answer 2

Fügen Sie einfach eine Eigenschaft in den HTML-Code ein, den Sie anhängen. Beachten Sie innerhalb der Schleife '<input type="text" ... value="' + arr_tele[i] + '"disabled>:

var arr_tele = ['02991812376', '02982919291']; 
 

 
//Prevent Duplicates. 
 
$(".teledivcontain").remove(); 
 

 
//Append Container for numbers 
 
$("#telediv").append('<div class="form-group col-md-3" id="teledivcontain"> </div>'); 
 

 
//Loop and append fields for each number 
 
for (i in arr_tele) { 
 
    $("#teledivcontain").append('<input type="text" class="form-control telenumber" placeholder="No number currently" value="' + arr_tele[i] + '"disabled><div class="form-group col-md-3"><button type="submit" class="btn btn-primary form-control detach">Detach</button></div>'); 
 
}

.fieldpos { 
 
    margin-left: 45px; 
 
    width: 40%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="panel-body row fieldpos"> 
 
    <fieldset class="form-group"> 
 
    <label for="telenum">Your Telephone Numbers</label> 
 
    <div class="row"> 
 
     <div id="telediv"> 
 
     </div> 
 
    </div> 
 
    </fieldset> 
 
</div>