jQuery选择器为空值

Question

我怎样才能创建一个与.is()jQuery中的函数一起使用的选择器,它表示以下表达式:

$('[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不起作用是因为它正在寻找没有子节点的节点,这不是你想要的.

$.is("[value='']")仅适用于最初在HTML中设置的值,而不是通过脚本或UI更新它.这是因为Node.getAttribute('value') === '' 当DOM对象是 DOM属性时,属性选择器会查看并且XML属性不会更新HTMLInputElement.value.

所以我们真正需要的是一个自定义伪选择器,它可以查看值DOM属性,并且实现起来非常简单.它与之$.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