¿Cómo contar li que no tiene ul?

Question

Hola, quiero contar LI que no tiene la UL, solo para el primer nivel, , pero cuando cuento esto muestra el tamaño 4 en lugar de 2, también cuenta el LI interno.

<div class="navigation-container"> 
    <ul class="first-level"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a> 
     <ul> 
      <li><a href="#">Link2.1</a></li> 
      <li><a href="#">Link2.2</a> 
      <ul> 
       <li><a href="#">Link 2.2.1</a></li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
     <li><a href="#">Link </a></li> 
    </ul> 
    </div> 

jQuery para esto.

jQuery(document).ready(function(){ 

    var nosubnav = jQuery('.first-level li:not(:has(ul))'); 
    var nosubnavsize = jQuery('.first-level li:not(:has(ul))').size(); 
    jQuery(nosubnav).css('border' , '1px solid red'); 
    alert('List item which does not have submenu '+nosubnavsize); 

}); 

Enlace para la prueba link text en JSBin,

gracias

Answer 1

Puede usar el selector infantil > t o dirigirse solo a elementos secundarios directamente debajo del padre.

jQuery(document).ready(function(){ 

    var nosubnav = jQuery('.first-level > li:not(:has(ul))'); 
    var nosubnavsize = jQuery('.first-level > li:not(:has(ul))').size(); 
    jQuery(nosubnav).css('border' , '1px solid red'); 
    alert('List item which does not have submenu '+nosubnavsize); 

}); 

Esto devolverá el conteo de 2. También puede optimizar esta ligeramente mediante la reutilización de su selección almacenada de la li objetivo (almacenada en nosubnav):

jQuery(document).ready(function(){ 

    var nosubnav = jQuery('.first-level > li:not(:has(ul))'); 
    nosubnav.css('border' , '1px solid red'); 
    alert('List item which does not have submenu '+nosubnav.length); 

}); 

Esto reducirá la sobrecarga de consultar el DOM por segunda vez.

Answer 2

No estoy seguro si estoy leyendo bien, pero ..

$('ul.first-level > li:not(:first)').length 

devuelve 2 (para mí) see demo

Answer 3

$('.first-level > li:not(:has(ul))').size()