Для каждого списка подсчитайте общее количество элементов с подходящим классом

Question

Я потратил много времени, пытаясь понять это и исследовать ответ, но ни один из ответов, которые я нашел, не учитывает подсчет каждого список. Мне нужно что-то, что может подсчитать общее количество элементов с классом «link» внутри каждый элемент с классом «nav». Мне нужно, чтобы это число хранилось как переменная, поэтому я могу добавить новый класс в элементы «nav» в зависимости от квалификаторов диапазона.

<ul class="nav"> 
    <li class="link"></li> 
    <li class="link"></li> 
    <li class="link"></li> 
    <li class="link"> 
     <ul class="subnav"> 
      <li class="link"></li> 
      <li class="link"></li> 
      <li class="link"></li> 
      <li class="link"></li> 
      <li class="link"></li> 
     </ul> 
    </li> 
</ul> 
<ul class="nav"> 
    <li class="link"></li> 
    <li class="link"></li> 
    <li class="link"> 
     <ul class="subnav"> 
      <li class="link"></li> 
      <li class="link"></li> 
      <li class="link"></li> 
     </ul> 
    </li> 
    <li class="link"> 
     <ul class="subnav"> 
      <li class="link"></li> 
      <li class="link"></li> 
     </ul> 
    </li> 
</ul> 

Любая помощь очень ценится!

Answer 1

После еще немного покопаться этим утром (и перед загрузкой StackOverflow), я наконец-то смог развивать этот ответ:

$('.nav').each(function(){ 
    var numLinks = $(this).find('.link').length; 
    if (numLinks > 40) { 
     $(this).addClass('mm-5-cols'); 
    } else if (numLinks > 30 && numLinks <= 40) { 
     $(this).addClass('mm-4-cols'); 
    } else if (numLinks > 20 && numLinks <= 30) { 
     $(this).addClass('mm-3-cols'); 
    } else if (numLinks > 10 && numLinks <= 20) { 
     $(this).addClass('mm-2-cols'); 
    } else if (numLinks <= 10) { 
     $(this).addClass('mm-1-col'); 
    } 
}); 

(Извиняюсь, если код решения немного не я изменил его от моего фактического кода, чтобы соответствовать моему примеру кода.).

Спасибо тем, кто ответил своим кодом!

Answer 2

Вы можете сделать что-то вроде этого:

var items = $.map($(".nav"), function(navEl) { 
    return [navEl, navEl.find(".link").length]; 
}); 

console.log(items); 

Я использую jQuery.map() построить новый массив на основе .nav элементов - каждый элемент массива, построенного на массив по его собственным: первый индекс объект jQuery, а второй - количество его дочерних элементов .link.

Answer 3

Вы можете использовать этот код, чтобы подсчитать количество элементов с классом link внутри каждого элемента с классом nav:

$(document).ready(function(){ 
    $('body').find('.nav').each(function(){ 
     sum = 0; 
     $(this).find('.link').each(function(){ 
     sum=sum+1; 
     }); 
     console.log(sum); 
    }); 
});