diferencia en los resultados devueltos entre .Tiene() y: tiene()

Question

Tengo una estructura de navegación retorcido que se pueden generalizar como:

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

Sub-elementos están ocultos hasta vuelo estacionario. Quiero indicar que B, D y E tienen subtemas labrando ellos, así que utilizan el selector:

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

Lo que sólo regresaron B y D. Si lo cambia a:

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

devueltos todos los artículos correctos, pero estoy confundido en cuanto a por qué.

EDITAR

:has() no parece ser afectada (enteramente) anidando como

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

devuelve los mismos resultados que .has() anteriormente.

Answer 1

De la documentación API jQuery:

:has selecciona elementos que contener al menos un elemento que coincide con el selector especificado.

.has() reduce el conjunto de elementos coincidentes a los que tienen un descendiente que coincide con el selector o elemento de DOM.

Hay una pregunta relacionada aquí: jQuery: subtle difference between .has() and :has(), que parece apuntar a cuál podría ser la diferencia en los dos.

Sin embargo, parece que :has no se ve dentro de un partido en una forma anidada mientras .has() hace porque devuelve un subconjunto de partidos como un objeto jQuery es capaz de igualar todos los descendientes, incluso el anidado, como un regular jQuery selector.

Answer 2

El :has() selector selecciona solo aquellos elementos que tienen elementos descendentes que coinciden con el selector dado. Internamente, :has is defined como (Sizzle es jQuery biblioteca selector predeterminado):

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

Esto es casi equivalente a la prueba jQuery("selector", elem).length o jQuery(elem).find("selector").length para cada elemento seleccionado para filtrar los que no tienen tales descendientes.

En contraste con eso, el has method puede tomar un selector o un elemento DOM y devuelve solo aquellos elementos que no contienen ninguno de los elementos dados. Debido a nivel interno, la has method is defined como:

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

por lo que utiliza el contains method para comprobar si los elementos dados están contenidos para filtrar los elementos seleccionados. Tenga en cuenta que es suficiente que solo se contenga uno de los elementos dados.