使用jQuery .length计算列表项

Question

下午好，

我的问题是我需要计算无序列表中包含的子项。我目前正在尝试使用.length技术，但它似乎不起作用。

我需要做的是计算列表中是否有足够的项目来显示菜单中的隐藏链接。

HTML

<ul class="locations_list">
    <a href="#"><h2>List item 1</h2></a>
    <li><a href="#">List item 2</a></li>
    <li><a href="#">List item 3</a></li>
    <li class="all_attractions"><a href="#">See more items..</a></li>
</ul>

CSS

.all_attractions { display: none !important; }

的jQuery

var listLength = $('.locations_list').children().length();
if (listLength == 6) {
    $('.all_attractions').show();
}

不是100％肯定我在哪里错了。如果有人能提供帮助，那将非常感激。

Answer 1

避免括号

更改

var listLength = $('.locations_list').children().length();

到

var listLength = $('.locations_list').children().length;

并从CSS规则中删除！important，以确保在调用show（）

后它可见

.all_attractions { display: none; }

您需要记住，children（）还会考虑标记

  <a href="#"><h2>List item 1</h2></a>

你有第一个孩子，也有

 <li class="all_attractions"> 

即使它不可见。

Answer 2

尝试length

var listLength = $('.locations_list li').length;
alert(listLength);
if (listLength == 6) {
    $('.all_attractions').show();
}

Demo

Answer 3

if ($('.locations_list').find('li').length == 6) {
    $('.all_attractions').show();
}

Answer 4

你的listLength是4，.children（）给出直接孩子的句柄。

Answer 5

var lenList = $('.locations_list > li').length;
if (lenList == 6) {
    $('.all_attractions').show();
}