请将for属性添加到标签并对其进行迭代
超文本标记语言

<div class="vendorDaterow">
  <div class="vendorName" id="dvVendorNameData">
    <label for="txtVendorName" class="text-label">SP Vender Name</label><span><input type="text" value="" name="nmVendorData" id="txtVendorName"/></span>
  </div>
  <div class="vendorFromDate">
    <label class="text-label" for="spFromDate">From Date</label>
    <span class="datepicker">
        <input type="text" value="" name="spFromDate" id="spFromDate" class="dateClass"/>
        <i class="fa fa-calendar" aria-hidden="true"></i>
        </span>
  </div>
  <div class="vendorToDate">
    <label class="text-label" for="spToDate">To Date</label>
    <span class="datepicker">
            <input type="text" value="" name="spToDate" id="spToDate" class="dateClass1"/>
            <i class="fa fa-calendar" aria-hidden="true"></i>
        </span>
  </div>
</div>

JS系统

$(document).ready(function() {
  var arrVendorValues = [];

  $(".text-label").each(function() {

    var key = $(this).text();
    var value = $("#" + $(this).attr('for')).val();
    arrVendorValues.push({
      key: key,
      value: value
    })
  })

  console.log(arrVendorValues)
});

如果您需要将其作为独立功能

function getInputsAsJSON() {
  var arrVendorValues = [];
  $(".text-label").each(function() {

    var key = $(this).text();
    var value = $("#" + $(this).attr('for')).val();
    arrVendorValues.push({
      key: key,
      value: value
    })
  });
  return arrVendorValues;
}

型
您可以根据需要在一些click中触发它。

你需要创建一个JSON对象数组，然后检查input元素的类。

var arrVendorValues = [];
function generateData(){
  $(".vendorDaterow").each(function () {
    var allInputs = $(this).find("input");
    var objectToAdd = {};
    for(var i = 0; i < allInputs.length; i++){
      if(allInputs[i].name == "nmVendorData"){
        objectToAdd["VendorName"] = allInputs[i].value; 
      }
      else if(allInputs[i].name == "spFromDate"){
        objectToAdd["ToDate"] = allInputs[i].value;
      }
      else if(allInputs[i].name == "spToDate"){
        objectToAdd["FromDate"] = allInputs[i].value;
      }
    }
    arrVendorValues.push(objectToAdd);
  });
  console.log(arrVendorValues);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vendorDaterow">
                                        <div class="vendorName" id="dvVendorNameData">
                                            <label>SP Vender Name</label><span><input type="text" value="" name="nmVendorData" id="txtVendorName" /></span>
                                        </div>
                                        <div class="vendorFromDate">
                                            <label>From Date</label><span class="datepicker"><input type="text" value="" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                        <div class="vendorToDate">
                                            <label>To Date</label><span class="datepicker"><input type="text" value="" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                    </div>
                                    
<button onclick="generateData();">Generate Data</button>

使用filter（）从集合中移除空值，使用map（）创建数组

var data = $('.vendorDaterow input').filter(function(){
  return this.value;// filter out empty values
}).map(function(){
  var label = $(this).closest('div').find('label').text(),
        o ={};
  o[label] = this.value;
  return o;
}).get()

console.log(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vendorDaterow">
  <div class="vendorName" id="dvVendorNameData">
    <label>SP Vender Name</label><span><input type="text" value="123" name="nmVendorData" id="txtVendorName" /></span>
  </div>
  <div class="vendorFromDate">
    <label>From Date</label><span class="datepicker"><input type="text" value="" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
  </div>
  <div class="vendorToDate">
    <label>To Date</label><span class="datepicker"><input type="text" value="456" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
  </div>
</div>

只需创建一个Map来保存显示名称和对应的name html属性的Map，然后在迭代器中，将结果推入JSON对象而不是数组。

<div class="vendorDaterow">
<div class="vendorName" id="dvVendorNameData">
    <label>SP Vender Name</label><span><input type="text" value="" name="nmVendorData" id="txtVendorName"/></span>
</div>
<div class="vendorFromDate">
    <label>From Date</label>
    <span class="datepicker">

    <input type="text" value="" name="spFromDate" id="spFromDate" class="dateClass"/>
    <i class="fa fa-calendar" aria-hidden="true"></i>
    </span>
</div>
<div class="vendorToDate">
    <label>To Date</label>
    <span class="datepicker">
        <input type="text" value="" name="spToDate" id="spToDate" class="dateClass1"/>
        <i class="fa fa-calendar" aria-hidden="true"></i>
    </span>
</div>

var map={nmVendorData:'Vendor Name', spFromDate:'FromDate', spToDate:'ToDate'}, 
result={};
$(".vendorDaterow input").each(function (a,b) {
    var text = $(this).val();
  result[map[$(b)[0].name]] = text;

})

您的result对象将保存您想要的结果。
如果您确实希望从用户那里收集多个输入，只需添加一些click处理程序来提交表单，并将result对象推入某个数组。

$(document).ready(function() {
    $('#btnSubmit').click(function() {
        var arrVendorValues = []
        var vendorDaterowObject = $(".vendorDaterow input");

        vendorDaterowObject.each(function() {
            var text = $(this).val();
            if (text) {
                arrVendorValues.push($(this).parents('.label-input').find('label').text() + ': ' + text);
            }
        });

        $('h3').text(arrVendorValues.join(', '));
    });
});

Demo