Jquery遍历输入字段的祖先

Question

我想写一个函数，将抓住div中的2个输入字段，并将它们推送到一个数组，我将作为JSON发布。我无法遍历div来查找第二个输入字段的值。我有一个允许客户端添加更多行的函数（div class = row id =“addInput”）。

HTML：

<div class="testList" id = wrapper> 
<div class="row" id="addInput" > 
    <section class="col col-4"> 
     <label class="input"> <i class="icon-append fa fa-calendar"></i> 
      <input type="date" class="ptoDate" name="startDate" id="startDate" placeholder="Request Date"> 
     </label> 
    </section> 
    <section class="col col-2"> 
     <label class="input"><i class="icon-append fa fa-clock-o"></i> 
      <input class="ptoHours" min="0" max="8" type="number" name="hour" id="hour" placeholder="Hours"> 
     </label> 
    </section> 
    <section class="col col-2"> 
     <a id="addField" title="Add More Fields" class="btn btn-primary" onclick="addInput('wrapper');">&nbsp;+&nbsp;</a> 
    </section> 
</div> 

记者：看来，因为我有段和标签，兄弟姐妹心不是要走的路。

var timeoffRequests = []; 

$("input[class = ptoDate]").each(function(){ 

    var date = $(this).val(); 
    var hours = $(this).siblings('.ptoHours').val(); 

    item ={}; 
    item['date'] = date; 
    item['hours'] = hours; 

    timeoffRequests.push(item); 
}) 

Answer 1

元素ptoHours和ptoDate没有兄弟姐妹，但两者的排DIV的后代。

您可以为了找到父行使用.closest()，然后你可以找到你ptoHours元素：

var timeoffRequests = []; 
 

 
$(".ptoDate").each(function(idx, ele){ 
 

 
    var date = $(ele).val();; 
 
    var hours = $(ele).closest('.row').find('.ptoHours').val(); 
 

 
    item ={}; 
 
    item['date'] = date; 
 
    item['hours'] = hours; 
 

 
    timeoffRequests.push(item); 
 
}) 
 

 

 

 
console.log(timeoffRequests);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="testList" id=wrapper> 
 
    <div class="row" id="addInput"> 
 
     <section class="col col-4"> 
 
      <label class="input"> <i class="icon-append fa fa-calendar"></i> 
 
       <input type="date" class="ptoDate" name="startDate" id="startDate" placeholder="Request Date"> 
 
      </label> 
 
     </section> 
 
     <section class="col col-2"> 
 
      <label class="input"><i class="icon-append fa fa-clock-o"></i> 
 
       <input class="ptoHours" min="0" max="8" type="number" name="hour" id="hour" placeholder="Hours"> 
 
      </label> 
 
     </section> 
 
     <section class="col col-2"> 
 
      <a id="addField" title="Add More Fields" class="btn btn-primary" onclick="addInput('wrapper');">&nbsp;+&nbsp;</a> 
 
     </section> 
 
    </div> 
 
</div>