jQuery: Given a selector, find only its visible elements

Question

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.

score 73 · Accepted Answer · answered Oct 29 '10 at 00:08

73

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')

answered Oct 29 '10 at 00:08

Nick Craver

Yeah that's what I meant Nick ;) – fehays Oct 29 '10 at 00:16
this is especially helpful if you need to filter on multiple values. E.g. selected and visible. +1 for a good solution! – Lucas B Jul 30 '12 at 19:10
FWIW, jQuery defines an element as visible "if they consume space in the document". An element could have its `visibility` set to `hidden`, so it's not actually seen on the page, but `:visible` would still return the element. – jacroe Mar 28 '17 at 17:53

Jason McCreary · Answer 2 · 2013-09-13T18:06:26.200

4

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

Note: There is a difference between something that is visible on the page and has its visibility property set.

edited Sep 13 '13 at 18:06

answered Oct 29 '10 at 00:13

Jason McCreary

2 Answers2