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

将警告声明更正为

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

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

Answer 2

由于您正在设置一个活跃的课程，您可以简单地让它变得更容易，并且只计算.active类别的所有内容

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

Answer 3

这一行：

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

执行以下操作：

找到.category元素的父级。
获取ul元素父元素的所有.category元素的集合。

这就是它返回12而不是3的原因。你想要做的是找到元素的ul而不是它的父元素：

$(this).find('ul')

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

查找列表中的子项数量

4 个答案: