ループラウンド配列、入力テキストボックスを追加して、それらのテキストボックスの値を設定します

Question

ループを繰り返し、配列に格納された値に基づいていくつかのコンテナを追加しようとしています。ループの周りを移動するたびに異なる値を取得します。

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>

私はマイナーな何かをしないのですが、カントは、どのような誰もが任意のアイデアを参照してください？

Answer 1

：

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

または、<input value="'+arr_tele[i]+'" ...を使用して値を直接割り当てることもできます。

これが役に立ちます。

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

代わりに追加するHTMLのプロパティとして追加するだけです。ループ'<input type="text" ... value="' + arr_tele[i] + '"disabled>内注：これだけ:lastセレクタを追加する作業を行います、値を割り当て、その後追加最後の入力を見つける必要があり

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>