jQuery *really* :visible

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.

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!