当前位置：文江博客话题详情

jQuery 检测可见但隐藏的元素

发布于 2024-08-26 21:38:39 字数 405 浏览 8 评论 0原文

我找不到正确的选择器

这看起来应该相当容易 - 但根据文档，（http://api.jquery.com/hidden-selector/ 和 http:// api.jquery.com/visible-selector/)...

元素可以被视为隐藏，原因如下：

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

棒棒糖 2024-09-02 21:38:39

如果这是您常用的内容，请制作自己的选择器:) 这是一个示例：

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

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>

Examples of use:

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

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

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

回复收藏 0 原文

居里长安 2024-09-02 21:38:39

现在 jQuery 已经内置了这一切

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

jQuery has this all built-in nowdays

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

回复收藏 0 原文

我一向站在原地 2024-09-02 21:38:39

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

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

如果它不是特定元素，那么您可以使用 :hidden 找到隐藏的父节点，然后使用自定义函数来查找该元素的节点输入你想要的。
例如，

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

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

If it is a specific element that you are looking for then you could check it's display property

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

If it wasn't a specific element then you could find the parent nodes that are hidden using :hidden then use a custom function to look for nodes of the type you want.
E.g.

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

If you want a clean selector then i think that you're going to be out of luck as i don't think what you want is part of the CSS spec, so won't be there as a selector in jQuery.

回复收藏 0 原文

~没有更多了~