Jquery获取最近类的未定义值

Question

我正在尝试比较一对日期时间值进行验证。 我创建了一个动态表单，每次用户点击“添加会话”按钮时都会使用它。 将附加会话表单 div。 例如，我正在尝试添加 2 个会话并使用以下代码验证 2 对会话日期时间值。

    $('.startdatetime').each(function(){
        console.log($(this).val());
        console.log($(this).closest('.datetime-div').next().find('.enddatetime').val());
        if($(this).val() === "" || $(this).val() === null ){
            $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Start Date Time is required.<p>");
            hasErr = true;
        }else if(moment($(this).val()).isSameOrAfter($(this).closest('.datetime-div').next().find('.enddatetime').val(), 'minute')){ //validate start datetime < end datetime
            $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Invalid Date Time.<p>");
            hasErr = true;
        }
    });

我在使用 console.log 调试的第一个循环中得到第一个会话结束日期时间的未定义值。

下面的代码显示了我的 html 片段。

              <div class="row">
                <div class="datetime-div col-md-6 col-xs-12 col-sm-12">
                    <div class="form-group">
                        <div class="form-line startdatetime-input">
                            <label>Start Date Time</label>
                            <input type="text" class="datetimepicker form-control startdatetime" placeholder="Please choose date & time...">
                        </div>
                    </div>                    
                </div>
                <div class="datetime-div col-md-6 col-xs-12 col-sm-12">
                    <div class="form-group">
                        <div class="form-line enddatetime-input">
                            <label>End Date Time</label>
                            <input type="text" class="datetimepicker form-control enddatetime" placeholder="Please choose date & time...">
                        </div>
                    </div>                    
                </div>
            </div>

 $('.startdatetime').each(function() { console.log($(this).val()); console.log($(this).closest('.datetime-div').next().find('.enddatetime').val()); if ($(this).val() === "" || $(this).val() === null) { $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Start Date Time is required.<p>"); hasErr = true; } else if (moment($(this).val()).isSameOrAfter($(this).closest('.datetime-div').next().find('.enddatetime').val(), 'minute')) { //validate start datetime < end datetime $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Invalid Date Time.<p>"); hasErr = true; } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="datetime-div col-md-6 col-xs-12 col-sm-12"> <div class="form-group"> <div class="form-line startdatetime-input"> <label>Start Date Time</label> <input type="text" class="datetimepicker form-control startdatetime" placeholder="Please choose date & time..."> </div> </div> </div> <div class="datetime-div col-md-6 col-xs-12 col-sm-12"> <div class="form-group"> <div class="form-line enddatetime-input"> <label>End Date Time</label> <input type="text" class="datetimepicker form-control enddatetime" placeholder="Please choose date & time..."> </div> </div> </div> </div>

知道使用最合适的 jQuery 选择器获取最接近的 enddatetime 值吗？

Answer 1

在您的代码中一切看起来都很好。 您没有得到undefined ，而是得到一个空值，因为两个输入都是空的。 如果您填写属性value ，您将在控制台中打印这些值，运行我共享的代码片段并检查。 我的更改在 html input元素中。 因此，似乎您应该在用户填写输入后运行您共享的 javascript，而不是像您共享的代码片段那样。

 $('.startdatetime').each(function() { console.log($(this).val()); console.log($(this).closest('.datetime-div').next().find('.enddatetime').val()); if ($(this).val() === "" || $(this).val() === null) { $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Start Date Time is required.<p>"); hasErr = true; } else if (moment($(this).val()).isSameOrAfter($(this).closest('.datetime-div').next().find('.enddatetime').val(), 'minute')) { //validate start datetime < end datetime $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Invalid Date Time.<p>"); hasErr = true; } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="datetime-div col-md-6 col-xs-12 col-sm-12"> <div class="form-group"> <div class="form-line startdatetime-input"> <label>Start Date Time</label> <input type="text" value="valueForStartDateTime" class="datetimepicker form-control startdatetime" placeholder="Please choose date & time..."> </div> </div> </div> <div class="datetime-div col-md-6 col-xs-12 col-sm-12"> <div class="form-group"> <div class="form-line enddatetime-input"> <label>End Date Time</label> <input type="text" value="valueForEndDateTime" class="datetimepicker form-control enddatetime" placeholder="Please choose date & time..."> </div> </div> </div> </div>