Jquery - How to check, if child in hidden DIV is visible?

Answer 1

The :visible selector does not work like this

Elements can be considered hidden for several reasons:

• They have a CSS display value of none.
• They are form elements with type="hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

if you want to check for css properties you can create a custom css selector as displayed in Select Element By CSS style (all with given style)

Answer 2

Use filters to check the display style, an example on jsFiddle

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

Reference

• jQuery .filter()

Answer 3

I've saved these two selector extensions which is essentially the same as Steve's version:

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

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

Answer 4

You could check the display property of the css:

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

As Gaby points out in the comments, this would not work if your elements are being hidden using visibility, so you may want to extend it to:

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

Answer 5

Because a child of a hidden element will always be hidden from display, you might try

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

This only works when you hide stuff with css though.

Answer 6

just return false :-) An item in a box you cant find... well... you probably lost that item with the box ;-)