jQuery检测可见但隐藏的元素

问题描述

这似乎应该很简单-但我找不到适合它的选择器

This seems like it should be fairly easy - but I can't find the right selector for it

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

可以将元素视为隐藏的原因有几个:

Elements can be considered hidden for several reasons:

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

我要检测的是此元素可见，但包含在隐藏的父对象中".即，如果我使父对象可见，则该元素也将可见.

What I want to detect is "this element is visible, but is contained in a hidden parent". Ie, if I made the parent visible, this element would also be visible.

推荐答案

如果这是您经常使用的方法，请创建自己的选择器:)这是一个示例:

If this is something you'll commonly use, make your own selector :) Here's an example:

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

您可以像这样使用它，测试标记:

You can use it like this, test markup:

<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() 函数，如下所示:

Alternatively, you can use the .filter() function like this:

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

这篇关于jQuery检测可见但隐藏的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！