Javascript 真实可见选择器

jquery

：visible

和

：hidden

选择器有点误导，它们选择消耗文档空间的元素，因此具有

可见性：hidden

的内容被归类为

：visible

，即使它不是o

我需要能够只选择那些

：真实可见的

，我可以用眼睛看到的元素，例如，不

不透明度：0

或

可见性：隐藏的

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

这是不是太贵了？ 有人能推荐一种可靠有效的方法来实现这一点吗？

试试下面的代码：

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 !")

那么：

$.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;
}

---

如果

：visible

出现故障，您能否提供一个简单的解决方案（这样我们就不必创建自己的版本来帮助您）？它必须是一个选择器吗？

：reallyivisible

还是一个插件方法可以接受？

。reallyivisible（）

？对

：reallyivisible

来说，这不是一个好的测试，创建一个childnode并查看它是否可见吗？关于这个主题有一些博客文章，例如：-你可能可以修改代码来做你想做的事情。我想前两位评论员miss理解了，但是，这里的例子@nnnnnn谢谢，似乎就是我搜索的那篇文章。这是失踪父母检查和显示：没有我怀疑OP已经知道如何做这样的测试，但他说“显然，要使一个元素在视觉上可见，它的所有祖先也必须可见，因此我假设有必要递归查找树。“也许你想谈谈如何有效地完成这项工作？谢谢你的回答，@onetrickpony的效率会更高看起来不错，只是检查了一些边缘案例而已。我们还对它进行了修改，以检查显示属性，但除此之外。太棒了，谢谢！