jQuery检测可见但隐藏的元素

Question

这似乎应该相当容易 - 但我找不到合适的选择器

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

元素可被视为隐藏,原因如下:

隐藏了一个祖先元素,因此该元素不会显示在页面上.

我想要检测的是"这个元素是可见的,但包含在隐藏的父元素中".即,如果我使父母可见,这个元素也将是可见的.

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

Answer 2

jQuery现在都内置了这个

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