Question

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

由于以下几个原因，可以将元素视为隐藏：

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

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

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

Answer 3

如果它是您正在寻找的特定元素，那么您可以检查它的显示属性

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

如果它不是特定元素，那么您可以使用以下方法找到隐藏的父节点：hidden然后使用自定义函数查找所需类型的节点。 E.g。

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

如果你想要一个干净的选择器，那么我认为你将会失败，因为我不认为你想要的是CSS规范的一部分，所以不会作为jQuery中的选择器。

Answer 4

我认为只有一个选择器可以工作，但是

<script>
function parentHidden(id) {
    return (!$(id).is(':hidden')) && $(id).parent().is(':hidden')));
}        
</script>

应该返回你需要的东西。如果你需要检查它的祖先而不仅仅是它的父级，你可以用一个能够追溯'祖先链'的函数替换$(id).parent().is(':hidden')部分。