Как посчитать li, у которого нет ul?

Question

Привет, я хочу посчитать LI, который не имеет UL, только для первого уровня, но когда я посчитаю это, он показывает размер 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 для меня ( см. Демо )

Answer 3

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