Question

I have the fallowing markup:

<div class="container">
    <div style="display:none">1</div>
    <div style="display:none">2</div>
    <div style="display:none">3</div>
</div>
<div class="container">
    <div style="display:none">1</div>
    <div>2</div>
    <div style="display:none">3</div>
</div>
<div class="container">
    <div>1</div>
    <div>2</div>
    <div style="display:none">3</div>
</div>

<div class="container">
    <div style="display:none">1</div>
    <div style="display:none">2</div>
    <div style="display:none">3</div>
    <div style="display:none">4</div>
</div>

How do I hide all the divs with class ‘container’ that have only hidden divs inside using jQuery selectors? In given case this would be 1st and 4th ones.

$(document).ready(function() {
    // how to hide all the divs with class 'container' that have no visible divs inside?
});

See markup at jsfiddle: http://jsfiddle.net/tfY58/

Thanks!

Answer 1

Like this:

$('.container:not(:has(:visible))')