How to check element visibility independent of parent visibility (jQuery or not)
<p>my first Question so please be patient. I have a container that holds a varying number of child elements like this:</p>

<pre><code>&lt;div class="parent"&gt;
    &lt;div class="element"&gt;content&lt;/div&gt;
    &lt;div class="element"&gt;content&lt;/div&gt;
    &lt;div class="element"&gt;content&lt;/div&gt;
&lt;/div&gt;
</code></pre>

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

<p>Simply asking for </p>

<pre><code>jQuery('.parent .element:visible').length
</code></pre>

<p>does <strong>not</strong> work. </p>

<p><strong>Background:</strong> The <code>parent</code> container can be toggled, and the content of the child <code>element</code>s 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. <code>available</code>, <code>unavailable</code> and some more. So the resulting DOM may look like this:</p>

<pre><code>&lt;div class="parent"&gt;
    &lt;div class="element available"&gt;content&lt;/div&gt;
    &lt;div class="element unavailable"&gt;content&lt;/div&gt;
    &lt;div class="element unavailable"&gt;content&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This is a module, that is used several times with different CSS files. So I do not control whether the CSS implementation actually hides <code>unavailable</code> 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?</p>

<p>Thanks in advance!</p>
