jQuery:.has() 和 :has() 之间的细微差别

Question

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

采用此 HTML:

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

现在:

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

会返回它，同时:

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

不会。这是一个错误还是一个功能？在这里比较: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)为此。

Answer 1

发生这种情况是因为 sizzle 选择器正在查看 :has 示例中具有 span 子级的所有 Div。但在 .has 示例中，它将所有 DIV 传递给 .has()，然后 .has() 查找不应该是独立选择的内容。 (“没有 child ”)。

基本上，:has() 是选择的一部分，但是 .has() 会传递这些 div，然后从中重新选择。

理想情况下，您不要使用这样的选择器。选择器中的 > 可能是一个错误，因为它在语义上很尴尬。注意:子运算符并不意味着是独立的。

Sizzle 与 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)，然后我们检查子项。

:has(jQuery 第 3129 行)

描述:选择至少包含一个与指定选择器匹配的元素的元素。

代码:

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

它们是两个不同的工具，:has 使用 100% 的 sizzle，而 .has 使用传递给它的目标。

注意:如果您认为这是一个错误，请填写错误单。