.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选择器一样.