使用2个不同输入从数组中获取值

Question

我正在尝试验证输入的动态数组，但是我不知道该怎么做，这是我的html：

<input type="text" class="form-control" name="studentContactDesc" placeholder="Description">
<input type="text"  class="form-control" name="studentContactPhone" placeholder="Phone">

当用户单击按钮时，该过程将添加更多如下输入：

<input type="text" class="form-control" name="studentContactDesc" placeholder="Description">
<input type="text"  class="form-control" name="studentContactPhone" placeholder="Phone">
<input type="text" class="form-control" name="studentContactDesc" placeholder="Description">
<input type="text"  class="form-control" name="studentContactPhone" placeholder="Phone">

每次用户单击按钮时，过程都会添加相同的两行。

我正在使用以下方式读取数据：

$(document).on('click','#saveRecord',function() {
    $("input[name=studentContactDesc]").each(function() {
        alert($(this).val());
    });

    $("input[name=studentContactPhone]").each(function() {
        alert($(this).val());
    });
});

此功能首先读取所有说明字段，然后读取所有电话字段。

是否有任何方法可以读取手机的说明字段以及其他顺序相同的字段？

Answer 1

您可以按以下方式修改功能，以同时提醒description和phone信息。

   $(document).on('click','#saveRecord',function() {
    var contact = $("input[name=studentContactDesc]");
    var phone =  $("input[name=studentContactPhone]");
    for(var i=0;i<contact.length;i++){
        alert(contact[i].value);
        alert(phone[i].value);
     }
   });

Answer 2

您可以将每组输入包装在div中并遍历div。
<div class='item'> <input type="text" class="form-control" name="studentContactDesc" placeholder="Description"> <input type="text" class="form-control" name="studentContactPhone" placeholder="Phone"> </div>

<code>
$('.item').each(function(){
     var values = "";
     $(this).children('input').each(function() { 
         values += $(this).val() + " ";
    });
    alert(values);
 });
</code>