How do I count list elements that are not hidden?

Question

Starting with a simple list:

<ul>
    <li>Item 1</li>
    <li style="display: none;">Item 2</li>
    <li>Item 3</li>
</ul>

I know that I can subtract the hidden elements from the list total

$('ul li').size() - $('ul li:hidden').size()

But I thought there might be a more elegant way to achieve this with jquery:

$('ul li:hidden:not').size()

That doesn't work. Any ideas?

Answer 1

The opposite of :hidden is :visible - jQuery docs.

$('ul li:visible').size()

Answer 2

The simplest form is:

var hidden = $("ul > li:hidden").length;

On a side note, to correctly use :not():

var hidden = $("ul > li:not(:visible)").length;

Lastly a jQuery object supports the size() method and the length property, which are interchangeable.