reallyvisible selector

Question

The jquery :visible and :hidden selectors are a little misleading, they select elements that consume space in the document, therefore something with visibility:hidden is classed as :visible even though it's not o_O

I need to be able to select only elements that are :reallyvisible, that I can see with my eyes eg, not opacity:0 or visibility:hidden

Obviously for an element to be visually visible all it's ancestors must also be visible so I assume a recursive look up the tree would be necessary.

Is this just too expensive? Can anyone suggest a reliable efficient way to achieve this?

Answer 1

How about:

$.expr[':'].reallyVisible = function(node, idx){

   while(true){

      // should be faster than $(node).css()
      var css = document.defaultView.getComputedStyle(node, null);

      if(css.opacity == 0 || css.visibility == 'hidden')
        return false;

     node = node.parentNode;

     if(!node || node === document)
         break;
   }        

   return true;
}

http://jsfiddle.net/jxEFk/