Поиск количества детей в списке

Question

Я пытаюсь найти способ получить детей из списка. Я пробовал разные способы, но не могу получить правильную сумму. Я получаю общее количество детей вместо количества детей для определенного значения клика. Вот пример кода:

<li class="category">First 
<ul style="display: none;"> 
    <li class="category_sub">1</li> 
    <li class="category_sub">2</li> 
    <li class="category_sub">3</li> 
</ul> 
</li> 
<li class="category">Second 
<ul style="display: none;"> 
    <li class="category_sub">1</li> 
    <li class="category_sub">2</li> 
    <li class="category_sub">3</li> 
    <li class="category_sub">4</li> 
</ul> 
</li> 
<li class="category">Third 
<ul style="display: none;"> 
    <li class="category_sub">1</li> 
    <li class="category_sub">2</li> 
    <li class="category_sub">3</li> 
    <li class="category_sub">4</li> 
    <li class="category_sub">5</li> 
</ul> 
</li> 

Вот Javascript:

 $('.category').click(function(){ 
     if($(this).hasClass('active')){ 
      $('.category').removeClass('hide'); 
      $(this).removeClass('active'); 
      $(this).parent().find("ul").hide(); 
     }else if(!$(this).hasClass('active') && !$(this).hasClass('hide')){ 
      $('.category').addClass('hide'); 
      $(this).removeClass('hide'); 
      $(this).addClass('active'); 
      $(this).parent().find("ul").toggle(); 
      $(this).parent().find("ul").css({"padding-top":"15px"}); 
      alert($(this).parent().find('ul').children().length); 
     } 
    }); 

Вот некоторые CSS:

.category_sub{ 
    list-style-type: none; 
    width: 100%; 
    padding-left: 20px; 
    height: 40px; 
} 

.category_sub:hover{ 
    background-color: #aaa; 
    cursor: pointer; 
} 

.category{ 
    list-style-type: none; 
    width: 100%; 
    padding-left: 0px; 
    height: 40px; 
    color: black; 
} 

.category.hide{ 
display: none; 
} 

.category.active{ 
    background-color: #aaa; 
} 

Вот является Jsfiddle: https://jsfiddle.net/1svvm69r/

Теперь, когда я нажимаю во-первых, я ожидаю увидеть 3, но я получаю 12. Он подсчитывает всех детей, а не значение, которое было нажато. Если вы посмотрите на JS, вы увидите, что я предупреждаю метод, чтобы получить значение. Какие-либо предложения?

Answer 1

Эта линия:

$(this).parent().find('ul') 

выполняет следующие действия:

1. Найти родитель .category эля Ent.
2. Получить коллекцию всех элементов ul, являющихся дочерними элементами элемента .category.

Именно по этой причине он возвращает 12 вместо 3. То, что вы хотите сделать, это найти ul для элемента, а не его родителей:

$(this).find('ul')

Answer 2

Исправьте предупредительное заявление

alert($(this).children().find('li').length); 

.children() получит ul элемента, а затем вы можете использовать find(), чтобы извлечь все li элементов внутри него.

Answer 3

Поскольку вы настраиваете активный класс, вы могли бы просто сделать себе немного легче, и просто посчитать все Ли из .active категории, как этот

alert($('.category.active > ul > li').length); 

Answer 4

Просто сделайте следующее:

 $('.category').click(function(){ 
     if($(this).hasClass('active')){ 
      $('.category').removeClass('hide'); 
      $(this).removeClass('active'); 
      $(this).parent().find("ul").hide(); 
     }else if(!$(this).hasClass('active') && !$(this).hasClass('hide')){ 
      $('.category').addClass('hide'); 
      $(this).removeClass('hide'); 
      $(this).addClass('active'); 
      $(this).parent().find("ul").toggle(); 
      $(this).parent().find("ul").css({"padding-top":"15px"}); 
     } 
     alert($(this).find('li').length); 
    });