Question

如何在jQuery中创建一个与.is()函数一起使用的选择器，代表以下表达式：

$('[name="Person[firstName]"]').val() === ''; // true
$('[name="Person[lastName]"]').val() === ''; // false

使用此HTML上下文

<input name="Person[firstName]" value="" >
  <foo bar="true" />
</input>

<input name="Person[lastName]" value="ABCDEFGH" />

：空选择器选择所有没有子项的元素（包括文本节点）。

 $('[name="Person[firstName]"]').is(':empty'); // false
 $('[name="Person[lastName]"]').is(':empty'); // true

另一次尝试

$('[name="Person[firstName]"]').is('[value=""]'); // true
$('[name="Person[lastName]"]').is('[value=""]'); // true

注意：这是一个出于知识目的的问题 - 此解决方案中必须使用 .is（）。

@edit http://jsfiddle.net/2CzWu/2/

必须在两个表达式

上返回false

Answer 1

:empty不起作用的原因是因为它正在寻找没有子节点的节点，这不是你想要的。

$.is("[value='']")仅适用于最初在HTML中设置的值，而不是通过脚本或UI更新它。这是因为属性选择器会查看Node.getAttribute('value') === '' and the XML attribute is not updated when the DOM object is，但DOM属性HTMLInputElement.value会这样做。

So what we really need is a custom pseudo selector that looks at the value DOM property和it's pretty simple to implement。它适用于$.is和:not()

$.expr[':'].emptyVal = function(obj){
   return obj.value === '';
};

var $firstName = $('[name="Person[firstName]"]');

$firstName.val('AAAA');

$('input:emptyVal').size(); // 2
$('input:not(emptyVal)').size(); // 0
$firstName.is('input:emptyVal'); // false
$firstName.is('input:not(:emptyVal)'); // true

jQuery选择器为空值

1 个答案: