Difference in results returned between .has () and: has ()

Question

I have a gnarly navigation structure that can be generalized as:

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

Subheadings are hidden until guidance. I want to point out that B, D and E have subpositions, style them, so I used a selector:

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

Which only returned B and D. Replacing it with:

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

returned all the correct elements, but I'm confused why.

EDIT

:has()does not seem to be affected (fully) nested as

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

returns the same results as .has()above.

Answer 1

From the jQuery API documentation:

:has selects elements that contain at least one element that matches the specified selector.

.has() , , DOM.

: jQuery: .has() : has(), , , , .

, , :has , .has() , , jQuery , , jQuery.

Answer 2

:has() selector , , . :has (Sizzle jQuery ):

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

jQuery("selector", elem).length jQuery(elem).find("selector").length , .

has , DOM , . has :

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