我有3个div,每个div都有一些输入字段和下一个按钮。
我想编写一段jQuery代码,当点击下一个按钮时,它会检查与该按钮相同div中的所有输入字段是否为空。
我尝试了以下代码,但没有成功,但我确信它是错误的,只是我在网上找不到相关信息... http://jsfiddle.net/xG2KS/1/
我尝试了以下代码,但没有成功,但我确信它是错误的,只是我在网上找不到相关信息... http://jsfiddle.net/xG2KS/1/
您可以使用 filter
方法将所有的 input
元素集合缩小为仅包含为空的元素,然后检查剩余元素的 length
属性:
$(".next").click(function() {
var empty = $(this).parent().find("input").filter(function() {
return this.value === "";
});
if(empty.length) {
//At least one input is empty
}
});
请注意,上述代码中“空”的定义是一个空字符串。如果你希望将空格也视为空,则在比较之前可能需要修剪该值。filter
函数内部不需要将this
传递给jQuery。DOM元素本身将具有一个value
属性,使用该属性访问速度更快,而不是使用val
。$('.next').click(function() {
var emptyInputs = $(this).parent().find('input[type="text"]').filter(function() { return $(this).val() == ""; });
if (emptyInputs.length) {
alert('Fail!');
}
});
由于没有针对这种情况的jQuery选择器,您可以扩展jQuery的选择器功能。
假设您选择了所有:text元素,则扩展如下:
$.extend($.expr[':'],{
isEmpty: function(e) {
return e.value === '';
}
});
$(this).closest('div').find(':text:isEmpty');
$.extend($.expr[':'], {
isEmpty: function (e) {
return e.value === '';
}
});
$('.next').click(function () {
var missingRequired = $(this).closest('div').find(':text:isEmpty');
console.log('Empty text fields: ' + missingRequired.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="next" class="next" />
</div>
<div>
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="next" class="next" />
</div>
<div>
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="next" class="next" />
</div>
$('.next').click(function() {
var inputs = $(this).parent().find('input[value=""]');
if (!inputs.length) {
// you have empty fields if this section is reached
}
});
value
值等于空字符串的元素。value
属性是在元素本身上定义的:<input type='text' value='something'>
。由于这些问题中的所有input
元素都没有value
属性,你的代码将始终说它们都是空的。 - James Allardice