.has()和:has()之间返回结果的差异

Question

我有一个粗糙的导航结构，可以概括为：

<ul id="navigation">
    <li>
        A
        <ul>
            <li>
                B
                <ul>
                    <li>C</li>
                </ul>
            </li>
            <li>
                D
                <ul>
                    <li>
                        E
                        <ul>
                            <li>F</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

子项被隐藏，直到悬停。我想指出B、D和E有子项目，所以我使用了选择器：

$('#navigation > li li:has(ul)')

它只返回B和D。将其更改为：

$('#navigation > li li').has('ul')

把所有正确的东西都退了，但我不明白为什么。

编辑

:has()似乎不受嵌套(完全)的影响，因为

$('#navigation ul > li:has(ul)')

返回与上面的.has()相同的结果。

Answer 1

来自jQuery API文档：

:has选择包含至少一个与指定选择器匹配的元素的元素。 .has()将匹配元素的集合缩减为具有与选择器或DOM元素匹配的后代的元素集。

这里有一个相关的问题：jQuery：.has()和:has()之间的细微区别，这似乎指向了两者之间的区别。

但是，:has似乎不以嵌套的方式查看匹配，而.has()则以嵌套的方式查看匹配，因为它返回匹配的子集，因为jQuery对象能够匹配所有的后代，甚至嵌套的后代，就像常规的jQuery选择器一样。

Answer 2

选择器只选择那些具有由给定选择器匹配的降序元素的元素。在内部，被定义 as (口吻是jQuery默认选择器库)：

function(elem, i, match){
    return !!Sizzle( match[3], elem ).length;
}

这几乎等同于测试每个选定元素的jQuery("selector", elem).length或jQuery(elem).find("selector").length，以过滤那些没有这样后代的元素。

与此相反，方法可以接受选择器或DOM元素，并且只返回那些不包含任何给定元素的元素。因为在内部，方法被定义为是：

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

因此，它使用方法来检查是否包含给定的元素来筛选选定的元素。注意，只包含一个给定的元素就足够了。