jQuery 检测可见但隐藏的元素答案

【问题标题】：jQuery detect visible but hidden elementsjQuery 检测可见但隐藏的元素
【发布时间】：2011-02-02 22:57:11
【问题描述】：

这看起来应该很容易 - 但我找不到合适的选择器

元素被认为是隐藏的有几个原因：

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

我想要检测的是“这个元素是可见的，但包含在隐藏的父元素中”。即，如果我使父元素可见，则该元素也将可见。

【问题讨论】：

【解决方案1】：

现在 jQuery 已经内置了这一切

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

【讨论】：

【解决方案2】：

如果这是您经常使用的东西，请制作您自己的选择器：) 下面是一个示例：

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';
}

【讨论】：

尼克一如既往的好答案！但是如果一个元素的可见性设置为隐藏，那么您需要将其用作选择器return $(a).is(':hidden') && $(a).css('display') != 'none' && $(a).css('visibility') == 'visible';
@fudgey - 好点，visible 的东西虽然没有“隐藏”，但它仍然占据页面上的空间。我想这取决于您是在寻找完全隐藏的东西还是在页面上根本没有空间的东西。无论您追求什么定义，请务必使用该方法。
太棒了！只是我想要的答案，也是第一个谷歌结果。我只想补充说我认为更好的选择器名称是“：invisible”。它是“可见的”……但 in可见。

【解决方案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 中作为选择器出现。

【讨论】：