空值的jQuery选择器

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" />

:empty Selector 选择所有没有子元素的元素（包括文本节点）。

 $('[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 不起作用的原因是因为它正在寻找没有子节点的节点，这不是您要寻找的。​​p>

$.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