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 选择器获取最接近的结束日期时间值吗？

Answer 1

代码中一切看起来都很好。您没有得到一个undefined，你得到一个空值，因为两个输入都是空的。如果填写属性value，则将在控制台中打印这些值，运行我共享的代码片段并检查。我的更改是在 htmlinput元素中。因此，似乎您应该在用户填写输入后运行您共享的 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>