How can I hide elements which only contain hidden DIVs in jQuery?

Question

I want to hide all blocks which only contain hidden DIVs (aside from a caption). All elements have to be selected via class names.

In detail, I want each "eventBlock" not to show up when all "groupBlocks" underneath are already hidden. The same with "Menu" which should not show up when all child eventBlocks are hidden.

Each "Menu" contains multiple eventBlocks,

each "eventBlock" contains 1 or more groupBlocks.

I am using classes and cannot use IDs because there are lots of groupBlocks, eventBlocks etc.

DIVs are hidden using JQuery's "hide()" function, if it's relevant.

My HTML basically looks like this:

<div class="Menu">
     <strong><a name="one">Menu CAPTION</a></strong><br />
     <div class="eventBlock event1">
         <p class="underlined">eventBlock CAPTION</p>
         <div class="groupBlock group2">
             <strong>name</strong><br />
             4pm - 6pm<br />
         </div>
         <div class="groupBlock group1">
             <strong>name</strong><br />
             5pm - 7pm<br />
         </div>
     </div>
</div>

Answer 1

This should work:

var blocks = jQuery(".groupBlock");
if( blocks.size() == blocks.not(":visible").size() )
{
  blocks.parents(".eventBlock").hide();
}

You can do something similar to hide the menu if all groupBlocks are hidden.

Answer 2

$('eventBlock').each(function() {
    if ($('.groupBlock:visible', this).length)
        $(this).show();
    else
        $(this).hide();
});

could be implemented as plugin

Answer 3

Simplest way is by using a single jQuery selector:

$('.eventBlock:not(:has(.groupBlock:visible))').hide();

Personally, I find the not() function more readable, and I can use end() later:

$('.eventBlock').not(':has(.groupBlock:visible)').hide();

Now, you want to hide the Menus as well? It seems a Menu should be hidden if it has no visible eventBlocks, which means it has no visible groupBlocks. So, we can use the same condition as before:

$('.eventBlock, .Menu').not(':has(.groupBlock:visible)').hide();