如何计算没有ul的李？

Question

嗨,我想计算没有UL的LI,仅用于第一级,但是当我计算它显示大小4而不是2时,它也计算内部LI.

<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为此.

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

});

链接JSBin上的测试链接文本,

谢谢

Answer 1

您可以使用子选择器>仅直接在父项下定位子元素.

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

});

这将返回2的计数.您还可以通过重新使用存储的目标li选择(存储在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);

});

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

Answer 2

不确定我是否正确阅读,但..

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

为我返回2(见演示)