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

您可以检查css的display属性：

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

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

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

Answer 2

我保存了这两个选择器扩展，这与Steve的版本基本相同：

来自another SO answer：

// 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＆amp;保罗爱尔兰：

// 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); };

Answer 3

:visible选择器不能像这样工作

由于多种原因，可以将元素视为隐藏：


他们的CSS显示值为none。

它们是表单元素   类型=“隐藏”。

他们的宽度和高度   显式设置为0.

祖先   元素是隐藏的，所以元素是   未在页面上显示。

如果要检查css属性，可以创建Select Element By CSS style (all with given style)

中显示的自定义css选择器

Answer 4

使用过滤器检查display样式， an example on jsFiddle

$("div")
.filter(function(){
    return $(this).css("display") == "none";
}).find("> div").filter(function() {
    return $(this).css("display") != "none";
}).length

<强>参考

jQuery .filter()

Answer 5

因为隐藏元素的子元素将始终隐藏显示，您可以尝试

$("#child_two").css("style") == "none"

这只适用于使用css隐藏内容时。

Answer 6

只是返回false :-)一个盒子里的物品你找不到......嗯......你可能用盒子丢了那个物品; - ）

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

6 个答案: