如何计算没有ul的li？ [英] How to count li which does not have ul?

问题描述

我想要计算没有UL的LI，仅针对第一级，
，但是当我计算它时，它显示大小4而不是2，它也计算内部LI。

 < div class =navigation-container> 
< ul class =first-level> 
< li>< a href =＃>连结1< / a>< / li> 
< li>< a href =＃>连结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 =＃>连结< / a>< / li> 
< / ul> 
< / div> 
  

jQuery for this。

  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（'没有子菜单的列表项'+ nosubnavsize）; 
 
}）; 
  

测试链接 link text on JSBin，

谢谢

解决方案您可以使用子选择器> 仅定位父级下的子元素。

  jQuery（document）.ready（function（）{
 
 var nosubnav = jQuery（'。first-level> li：not（：has （）;'）; 
 var nosubnavsize = jQuery（'。first-level> li：not（：has（ul））'）。size（）; 
 jQuery（nosubnav）.css 'border'，'1px solid red'）; 
 alert（'没有子菜单的列表项'+ nosubnavsize）; 
 
}）; 
  

这将返回2的计数。您还可以通过重新使用存储的目标li（存储在 nosubnav 中）：

  jQuery（document）。 ready（function（）{
 
 var nosubnav = jQuery（'。first-level> li：not（：has（ul））'）; 
 nosubnav.css（'border' ，'1px solid red'）; 
 alert（'没有子菜单的列表项'+ nosubnav.length）; 
 
}）; 
  

这将减少第二次查询DOM的开销。

Hi I want to count LI which does not have the UL , for the first level only, but when I count this it shows size 4 instead of 2, its count the inner LI also.

<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 for this.

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

});

Link for the testing link text on JSBin,

thanks

解决方案

You can use the child selector > to target only child elements directly under the parent.

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

});

This will return the count of 2. You can also optimise this slightly by reusing your stored selection of the target li (stored in 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);

});

This will cut out the overhead of querying the DOM a second time.

这篇关于如何计算没有ul的li？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！