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

Question

how can i check a div in a hidden div ... if visible or not?

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

This will not work.

Any ideas`?

Thanks in advance! Peter

I think there's some confusion here, it's *not* visible, since it isn't dislayed....because a parent being hidden means it's hidden as well. `:visible` doesn't mean `display != "none"`, it means *is it visible* (does it have dimensions?), and it's not. — Nick Craver, Nov 03 '10 at 12:34
From the point of view of user of the web page, the child will be invisible, but what status is returned by `is(':visible')`? Does it return the implicit or explicit visibility? — belugabob, Nov 03 '10 at 12:35
All children in an element that has `display:none` will be hidden. But I think that Peter wants to know what it's own display-property is. But I can't think of a reason why you want to know that... The answer of Steve Greatrex should get what you want anyway. — Justus Romijn, Nov 03 '10 at 12:41
Visible checks for visibility of the element, not just the `display` style. See my answer on how to filter the selection using `.filter()`, then you can check the style. — BrunoLM, Nov 03 '10 at 13:02

Steve Greatrex · Accepted Answer · 2010-11-03T12:51:03.360

18

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") {
    //...
}

edited Nov 03 '10 at 12:51

answered Nov 03 '10 at 12:33

Steve Greatrex

15,789
5
59
73

3

@David - He's checking `!= "none"`, *any* other display type would be valid. – Nick Craver Nov 03 '10 at 12:36
sorry, I meant what if display == '' ? does jQuery automatically replace '' with none? – kͩeͣmͮpͥ ͩ Nov 03 '10 at 12:39
@David - `""` dos display will be the default for the element, for a `
` it's `block`, for a `
` it's `list-item`, etc.

– Nick Craver Nov 03 '10 at 12:40

it would fail for `visibility:hidden` – Gabriele Petrioli Nov 03 '10 at 12:45

@Gaby - it depends on your definition of "visible", `visibility: hidden` still occupies space in the page, so it is something you can see. – Nick Craver Nov 03 '10 at 13:27

@nick, i agree that it depends.. but in the same manner, an ancestor `display:none` means all children are invisible (*as jquery supports*). I was only offering an additional case to watch for, since the OP is unclear on what he wants exactly.. – Gabriele Petrioli Nov 03 '10 at 13:35

score 6 · Answer 2 · edited May 23 '17 at 12:34

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

score 4 · Answer 3 · edited Jun 20 '20 at 09:12

4

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)

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 03 '10 at 12:40

Gabriele Petrioli

191,379
34
261
317

It's not `:isvisible`, it's `:visible` – BrunoLM Nov 03 '10 at 13:00

score 3 · Answer 4 · answered Nov 03 '10 at 12:48

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()

score -1 · Answer 5 · answered Nov 03 '10 at 12:35

-1

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.

answered Nov 03 '10 at 12:35

kͩeͣmͮpͥ ͩ

7,783
26
40

score -4 · Answer 6 · answered Nov 03 '10 at 12:36

-4

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

answered Nov 03 '10 at 12:36

DoXicK

4,784
24
22

1

thanks for telling that on a 3 year old thread. This really made Peters day and now he can finally move on with his quest for finding an element in an hidden element. – DoXicK Aug 02 '13 at 11:43

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

6 Answers6

Linked

Related