.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: subtle difference between .has() and :has()，这似乎表明了两者的区别。

但是，:has 似乎不会以嵌套方式在匹配中查找，而 .has() 这样做是因为它返回匹配的子集，因为 jQuery 对象能够匹配所有后代，甚至是嵌套的后代，就像一个普通的 jQuery 选择器。

Answer 2

:has() selector 仅选择那些具有与给定选择器匹配的降序元素的元素。在内部，:has is defined 为（Sizzle 是 jQuery 默认选择器库）：

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

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

与此相反，has method 可以采用选择器或 DOM 元素，并且只返回那些不包含任何给定元素的元素。因为在内部，has method is defined 为：

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;
            }
        }
    });
}

因此它使用contains method 来检查是否包含给定元素以过滤所选元素。请注意，只包含一个给定元素就足够了。