jQuery：.has()和：has()之间的微妙区别

当与子选择器>一起使用时,jQuery的“has”的两个变体的行为方式不同.

拿这个HTML：

<div>
  <span>Text</span>
</div>

现在：

$("div:has(>span)");

会返回,而：

$("div").has(">span");

不会.是bug还是功能？在这里比较：http://jsfiddle.net/aC9dP/

编辑：这可能是一个错误或至少是无证的不一致的行为.

无论如何,我认为让孩子选择器一贯地作为一元运算符是有益的.它使您能够执行另外需要自定义过滤功能的功能 – 它允许您直接选择具有特定子项的元素：

$("ul:has(>li.active)").show();     // works
$("ul").has(">li.active)").show();  // doesn't work,but IMHO it should

而不是：

$("ul").filter(function () {
  return $(this).children("li.active").length > 0;
}).show();

我已经打开a jQuery ticket (7205)了.

解决方法

发生这种情况是因为嘶嘶声选择器正在查看具有以下示例的跨度子节点的所有Div.但在这个例子中,它将所有DIV传递给.has(),然后它将寻找不应该是独立选择的东西. (“没有孩子”).

基本上是：has()是选择的一部分,但是.has()会传递这些div,然后从它们重新选择.

理想情况下,您不要使用这样的选择器. >在选择器中可能是一个错误,因为它在语义上是尴尬的.注意：子操作符并不意味着是独立的.

Sizzle vs target.sizzle：

我一直在说v1.4.2 of jquery development release.

.has(jQuery的第3748行)

说明：将匹配元素的集合减少到具有与选择器或DOM元素匹配的后代的匹配元素.

码：

var targets = jQuery( target );
    return this.filter(function() {
        for ( var i = 0,l = targets.length; i < l; i++ ) {
            if ( jQuery.contains( this,targets[i] ) ) { //Calls line 3642
                return true;
            }
        }
    });

第3642行涉及2008年插件compareDocumentPosition,但重要的是我们现在基本上只运行两个jQuery查询,其中第一个选择$(“DIV”),下一个选择$(“> span “)(返回null),然后我们检查孩子.

：有(jQuery的第3129行)

说明：选择至少包含一个与指定选择器匹配的元素的元素.

码：

返回!! Sizzle(match [3],elem).length;

它们是两个不同的工具,它们使用了百分之百的嘶嘶声,而.has使用传递给它的目标.

注意：如果您认为这是一个错误,请填写错误代码.