CODEWITHSUNDEEP
jquerylist
user2265712
user2265712

Reputation:

Calculating list items using jQuery .length

Good afternoon,

My problem here is that I need to calculate the children contained in an unordered list. I am currently trying to use the .length technique but it doesn't seem to work.

What I need this to do is calculate whether there are enough items in the list to display the hidden link in the menu.

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

Not 100% sure where I'm going wrong here. If anyone could help that would be greatly appreciated.

Upvotes: 1

Views: 331

Answers (5)

gregjer
gregjer

Reputation: 2843

Avoid brackets in length

Change

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

to

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

and remove !important from CSS rule to make it sure it's visible after calling show()

.all_attractions { display: none; }

You need to remember that children() will take into account also tag

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

which you have as first child and as well

 <li class="all_attractions">

even though it's not visible.

Upvotes: 2

DevlshOne
DevlshOne

Reputation: 8457

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

Upvotes: 0

Mohammad Masoudian
Mohammad Masoudian

Reputation: 3501

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

Upvotes: 0

Farhan
Farhan

Reputation: 752

your listLength is 4, .children() gives the handle of immediate childrens.

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 121998

Try length

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

Demo

Upvotes: 0

Related Questions