Jquery - 如何查看隐藏DIV中的子项是否可见？

Question

如何查看隐藏div中的div ...如果可见或不可见？

HTML

<div style="display:none;">
  <div id="two_child"></div>
  <div id="three_child" style="display:none"></div>
</div>

JS

if($('#two_child').is(':visible'))
{
  alert('true');
}

这不行.

任何想法？

提前致谢!彼得

Answer 1

你可以检查display一下css 的属性:

if ($("#two_child").css("display") != "none") {
    //...
}

正如Gaby在评论中指出的那样,如果您的元素被隐藏使用visibility,这将无效,因此您可能希望将其扩展为:

var $child = $("#two_child");
if ($child.css("display") != "none" && $child.css("visibility") != "hidden") {
    //...
}

Answer 2

我已经保存了这两个选择器扩展,这与Steve的版本基本相同:

从另一个SO回答:

// jQuery selector to find if an element is hidden by its parent
jQuery.expr[':'].hiddenByParent = function(a) {
 return $(a).is(':hidden') && $(a).css('display') != 'none' && $(a).css('visibility') == 'visible';
};

来自Remy Sharp和Paul Irish:

// reallyvisible - by remy sharp & paul irish
// :visible doesn't take in to account the parent's visiblity - 'reallyvisible' does...daft name, but does the job.
// not neccessary in 1.3.2+
$.expr[ ":" ].reallyvisible = function(a){ return !(jQuery(a).is(':hidden') || jQuery(a).parents(':hidden').length); };