JQuery - How do I count the number of elements selected by a selector?

Question

I am using $().fadeOut() to fade items out in a list ( < li> < /li>). When the list is empty I wish to hide a parent object.

I plan on doing this by checking in my trigger event that fades the list if the count of the objects is 0 then hide the parent element. I can use the fadeOut callback to remove the elements if necessary.

The to the point question: How do I select li tags inside a ul and then get the total count of them using jquery?

Answer 1

Like this:

$('ul > li').length

A more elegant way to do it would be to write

$('ul:empty').fadeOut();

If the ul is not empty, the selector won't match anything, and the code will do nothing.

You may need to write

$('.SomeContainer:has(ul:empty)').fadeOut();