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

Question

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

使用这个HTML：

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

现在：

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

将返回，同时：

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

不会的。它是一个bug还是一个特性？比较这里：http://jsfiddle.net/aC9dP/

编辑：，这可能是一个bug，或者至少是无文档的不一致行为。

无论如何，我认为让孩子选择器作为一元操作是有益的。它使您能够执行一些其他需要自定义筛选函数的操作--它允许直接选择具有特定子元素的元素：

$("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();

我为这个打开了jQuery票(7205)。

Answer 1

之所以会出现这种情况，是因为span选择器正在查看所有在“有示例”中具有跨子的Div。但是在.has示例中，它将所有的DIV传递给.has()，后者寻找不应该是独立选择的东西。(“无子女”)。

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

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

西泽vs target.sizzle：

我总是在说jquery开发版本的v1.4.2。

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

它们是两种不同的工具，“拥有”使用100%的uses，而.has使用传递给它的目标。

注意:如果你认为这是一个错误，去填一下错误票。

Answer 2

我想你可能偶然发现了一个真正的窃听器。问题可能在于您使用子选择器的方式。正如user257493所指出的，它不打算单独使用(或者至少我在文档中没有看到任何这样的例子)。

不过，看看这个。如果在*中的子选择器之前添加了一个.has()，那么它突然起作用了：http://jsfiddle.net/Ender/FjgZn/

但是如果您在:has()选择器中做同样的事情，它就会停止工作！见此处：http://jsfiddle.net/Ender/FjgZn/

这两者的实现方式显然是不同的。