javascript - 真正可见的选择器

Question

jquery:visible和:hidden选择器有点误导，它们选择占用文档空间的元素，因此即使它不是 o_O ，也会将其visibility:hidden归类为:visible

我需要能够只选择:reallyvisible那些我可以用我的眼睛看到的元素，例如，不是opacity:0或visibility:hidden

显然，要使一个元素在视觉上可见，它的所有祖先也必须是可见的，所以我认为递归查找树是必要的。

这只是太贵了吗？任何人都可以提出一种可靠有效的方法来实现这一目标吗？

Answer 1

怎么样：

$.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/

Answer 2

试试这个代码：

function isVisible(el){
    if (el.css('opacity') != '0' && el.css('visibility') != 'hidden') {
        return true
    }
    return false
}

$('myelement').filter(function () {
    visible = true

    if (isVisible($(this)) == false)
        visible = false

    $(this).parents().each(function(){
        if (isVisible($(this)) == false)
            visible = false
    })

    return visible == true
}).html("I'm really visible !")