jQuery如何检测可见但隐藏的元素

Question

这似乎应该很容易 - 但我找不到正确的选择器。

根据文档 (http://api.jquery.com/hidden-selector/ 和 http://api.jquery.com/visible-selector/)...

元素可能因为以下原因而被视为隐藏:

祖先元素被隐藏，因此该元素未在页面上显示。

我想要检测的是"此元素可见，但包含在隐藏的父元素中"。也就是说，如果我让父元素可见，这个元素也会可见。

- Paul

Answer 1

如果这是你经常使用的东西，请创建自己的选择器 :) 这里有一个例子：

jQuery.expr[':'].hiddenByParent = function(a) { 
   return jQuery(a).is(':hidden') && jQuery(a).css('display') != 'none'; 
};

你可以像这样使用它，测试标记：

<div style="display: none" id="parent">
  <div>
      <div id="child">Test</div>
  </div>
</div>
​

使用示例：

$("div:hiddenByParent").length;​​​​​​​​​​​​​​​​​​ // "2" (plain div + child match)
$("#child").is(":hiddenByParent"); // true

或者，您可以像这样使用 .filter() 函数：

$('selector').filter(function() {
  return $(this).is(':hidden') && $(this).css('display') != 'none';
}

- Nick Craver

---

一如既往的好答案，Nick！但是如果一个元素的可见性设置为隐藏，那么你需要使用这个选择器 return $(a).is(':hidden') && $(a).css('display') != 'none' && $(a).css('visibility') == 'visible';。 - Mottie

@fudgey - 很好的观点，“visible”东西并不是“hidden”，它仍然占据页面上的空间。我想这取决于你是否正在寻找完全隐藏的东西或根本不占用页面空间的东西。无论你想要的定义是什么，一定要采用那种方法。 - Nick Craver

太棒了！正是我想要的答案，而且还是谷歌搜索的第一个结果。我只想补充说，我认为更好的选择器名称应该是“：invisible”。它是“visible”...但是invisible。 - Dave Stewart

Answer 2

现在jQuery已经内置了这一功能。

$("#child").closest(':hidden').length == 0

- root

Answer 3

如果您正在寻找特定的元素，则可以检查其显示属性。

$('#element').css('display') != 'none';

如果不是特定元素，则可以使用:hidden找到隐藏的父节点，然后使用自定义函数查找所需类型的节点。 例如：

$('parent-selector:hidden').find('node-selector').each(function(){
  if($(this).css('display') != 'none') {
    // do what you wanted
  }
});

如果你想要一个干净的选择器，我认为你会很失望，因为我不认为你想要的是 CSS 规范的一部分，所以在 jQuery 中也不会作为选择器存在。

- Barney Scott