javascript - 如何动态获取文本框的值？

Question

我在点击添加按钮时动态添加三个文本框... 这三个文本框在同一个 div 标签中...... 每个文本框都有不同的名称...

因此，每次单击“添加”按钮时，我都会创建具有三个文本框的新 div...

现在我想访问文本字段输入的值...如何访问？？

    <div class="ord" id="parent">

    </div>
    <button type="button" class="btn btn-primary fa fa-plus add btn-xs"> Add </button> 

JS

   var items = "<form role='form' class='form-inline' style='padding-bottom: 5px;'>"
                    + "<div class='form-group'><input id='med' placeholder='' class='form-control'></div>"
                    + "<div class='form-group' style='padding-left: 5px;'><input id='qua' placeholder='' class='form-control'></div>"
                    + "<div class='form-group' style='padding-left: 5px;'><input id='rem' placeholder='' class='form-control'></div>"

  $('.add').on("click",function(){
div_id = div_id + 1
$( ".ord" ).append('<div id="item'+div_id+'">' + items + '<button style="margin-left: 3px;" type="button" id="item'+div_id+'" class="btn btn-default btn-danger btn-xs fa fa-close" onclick=deleteitem(id)></button></form></div>');
   })

我有所有 div 标签的 Id 数组...比如 [item1,item2,item3]

如何访问所有文本字段输入的文本？？

Answer 1

使用 .forEach和 concatenate id与 #选择元素时(使其有效 ID 选择器)。

['item1', 'item2', 'item3'].forEach(function(item) {
  $("#" + item).find('input').each(function() {
    console.log(this.value);
  });
});

编辑如果item1,...是 id的 parent-div-elements , 使用 .find('input')寻找后代<input>元素。 .each可用于遍历所有 found 元素以获得它们的 value .

注意:您必须通过 this.id而不是 id在 deleteitem(id)