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>

JS：看来，由于我有部分和标签，兄弟姐妹不是要走的路。

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>

Jquery遍历输入字段的祖先

1 个答案: