jQuery: Given a selector, find only its visible elements

Question

Hi all,

This should be an easy one. I have a variable that I've already declared called $listItems. The declaration looks like this:

var $listItems = $ul.children('li'); // $ul is just a selected unordered list

Later in my code, I'd like to only get the ones that are currently visible. How would I go about that? Something like:

$listItems.parent().children(':visible')?

Thanks.

Answer 1

You can use .filter() to narrow down a set of elements to only those that match a selector (or a function), like this:

$listItems.filter(':visible')

Answer 2

You have it with the :visible selector. It can be used in any of the jQuery collection methods $(), filter(), children(), find(), etc.

Note though that there is a difference between something that is visible on the page and has its visibility CSS property set.