Question

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!

Answer 1

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.net/EbaMY/2/