my first Question so please be patient. I have a container that holds a varying number of child elements like this:

<div class="parent">
    <div class="element">content</div>
    <div class="element">content</div>
    <div class="element">content</div>
</div>

Quick Question: Is there a jQuery or plain JS way of checking whether an element container would be visible independent of the parent being visible?

Simply asking for

jQuery('.parent .element:visible').length

does not work.

Background: The parent container can be toggled, and the content of the child elements gets fetched by ajax requests and is filled when the response arrives. On every response I get, the child containers get specific classes indicating the type of the response, e.g. available, unavailable and some more. So the resulting DOM may look like this:

<div class="parent">
    <div class="element available">content</div>
    <div class="element unavailable">content</div>
    <div class="element unavailable">content</div>
</div>

This is a module, that is used several times with different CSS files. So I do not control whether the CSS implementation actually hides unavailable elements because this is done only in CSS. And the container can be open, but does not have to. But I have to know if there would be visible elements inside of the container without opening it. Is this possible?

Thanks in advance!

my first Question so please be patient. I have a container that holds a varying number of child elements like this:

<div class="parent">
    <div class="element">content</div>
    <div class="element">content</div>
    <div class="element">content</div>
</div>

Quick Question: Is there a jQuery or plain JS way of checking whether an element container would be visible independent of the parent being visible?

Simply asking for

jQuery('.parent .element:visible').length

does not work.

Background: The parent container can be toggled, and the content of the child elements gets fetched by ajax requests and is filled when the response arrives. On every response I get, the child containers get specific classes indicating the type of the response, e.g. available, unavailable and some more. So the resulting DOM may look like this:

<div class="parent">
    <div class="element available">content</div>
    <div class="element unavailable">content</div>
    <div class="element unavailable">content</div>
</div>

This is a module, that is used several times with different CSS files. So I do not control whether the CSS implementation actually hides unavailable elements because this is done only in CSS. And the container can be open, but does not have to. But I have to know if there would be visible elements inside of the container without opening it. Is this possible?

Thanks in advance!

• javascript
• jquery

• 1 Generally, if a parent is invisible, it's children are implicitly. – Orbling Commented Nov 26, 2012 at 14:51
• Yes thats true, but maybe there is a way to filter out the inherited styles or circumvent this problem nevertheless? – crackmigg Commented Nov 26, 2012 at 14:55
• @Orbling Implicit, but they don't have the styling that says so. – Ian Commented Nov 26, 2012 at 14:58

2 Answers 2

I'm not sure why you need to do this if you have classes like available or unavailable. But this is how I would do it (so the actual visibility doesn't interfere with the child's visibility):

if (
    $('.element').css('display') != 'none' && 
    $('.element').css('visibility') != 'hidden'
) {
    // ...
}

In action:

http://jsfiddle/EbaMY/2/

It's not the best answer, but I think it should work

  if ($('.parent').is(':visible')) {
        $('.element:visible')....//what you want to do
    }else{
       $('.parent').show()
       $('.element:visible')...//what you want to do again
       $('.parent').hide()
    }