On a project I worked with Paul Irish on recently we found that we needed to asset whether an element was visible, but the :visible selector doesn't always do the job.

UK EVENTAttend ffconf.org 2024

The conference for people who are passionate about the web. 8 amazing speakers with real human interaction and content you can't just read in a blog post or watch on a tiktok!

Update: As of jQuery 1.3.2 this is no longer a problem or required. See Paul's comment below.

The Problem with :visible

The :visible selector works fine if you're asking whether the particular element has been set to invisible (either via the display or visibility CSS style).

However, if the element is hidden because a parent element is set to hidden, the :visible selector returns a false positive.

Solution

If you want to know whether the element is truly visible, you need to step through the parent elements to be 100% sure.

You can do this via a macro selector too:

jQuery.extend(
  jQuery.expr[ ":" ],
  { reallyvisible : function (a) { return !(jQuery(a).is(':hidden') || jQuery(a).parents(':hidden').length); }}
);

See the working example (source)

An important note: I tried overloading the :visible selector using this new :reallyvisible and it actually breaks the show/hide functions within jQuery - so don't go renaming it!