javascript - 在 jquery 中迭代以获取输入文本的值

Question

我有三行，我想通过循环获取所有文本的值，所以我尝试了这样的方法。

var collection = $(".vendorDaterow");
collection.each(function() {});

但是在调试时我没有在任何属性中找到值。

下面是我的html

<tr>
  <td>
    <div class="row noPadding vendorForm">
      <div class="vendorDaterow">
        <div class="vendorName" id="dvVendorNameData">
          <label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName" /></span>
        </div>
        <div class="vendorFromDate">
          <label>From Date</label><span class="datepicker"><input type="text" 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" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </div>
      </div>
      <div class="add">
        <i class="fa fa-plus" aria-hidden="true"></i>
      </div>
      <i class="max"><label>(Maximum 5 Vendors)</label></i>
    </div>
  </td>
</tr>

如何获取所有元素的输入文本的值

Answer 1

这是沿着树向下走的方法。您可以缩短它，但它是不言自明的。

var collection = $(".vendorDaterow");


collection[0].childNodes.forEach((element)=>{
  if (element.tagName == 'DIV'){
     //console.log(element.childNodes)
     element.childNodes.forEach((element) => {
       if(element.tagName == 'SPAN') {
          //console.log(element.childNodes);
          element.childNodes.forEach((element) => {
            if(element.tagName == 'INPUT'){
              console.log(element.value)
            }
          })
       }
     });    
  }
})

它迭代并找到合适的元素，假设结构将保持不变。您可以删除评论标签以获得流程。

尝试 2。

function recursiveEach($element){
    $element.children().each(function () {
        var $currentElement = $(this);
        // This is our input so we do something with it
        if($currentElement[0].tagName == 'INPUT') {
           console.log(" the values are: " + $currentElement[0].value)
        }
        //////////// Loop her children
        recursiveEach($currentElement);
    });
}

//////////// Parent div
recursiveEach($(".vendorDaterow"));

语法有点像 jquery-esk，但它有很好的迭代递归形式。