查找列表中的子项数量

Finding the amount of children in a list

本文关键字：列表 查找      更新时间：2023-09-26

我正在尝试找到一种方法来获取列表的子项。我尝试了不同的方法，但永远无法获得正确的数量。我得到的是子项总数，而不是特定点击值的子项数量。下面是一个示例代码：

<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，您将看到我正在提醒该方法以获取值。有什么建议吗？

这一行：

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

执行以下操作：

  1. 查找.category元素的父元素。
  2. 获取作为.category元素父级的所有ul元素的集合。

这就是它返回 12 而不是 3 的原因。您要做的是查找元素的ul，而不是其父元素：

$(this).find('ul')

将警报语句更正为 

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

.children()将获取ul元素，然后您可以使用find()获取其中的所有li元素。

由于您正在设置一个活动类，您可以简单地自己简化一些，只需像这样计算 .active 类别的所有 li

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

只需执行以下操作： 

        $('.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); 
    });
相关文章：