Wie kann ich Elemente verstecken, die nur versteckte DIVs in jQuery enthalten?

Question

Ich möchte alle Blöcke ausblenden, die nur versteckte DIVs enthalten (abgesehen von einer Beschriftung). Alle Elemente müssen über Klassennamen ausgewählt werden.

Im Detail möchte ich, dass jeder "eventBlock" nicht angezeigt wird, wenn alle darunter liegenden "groupBlocks" bereits ausgeblendet sind. Dasselbe gilt für "Menu", das nicht angezeigt werden soll, wenn alle untergeordneten eventBlocks ausgeblendet sind.

Jedes "Menü" enthält mehrere eventBlocks,

jedes "eventBlock" enthält 1 oder mehr groupBlocks.

I Klassen verwenden und nicht-IDs verwenden, weil es viele groupBlocks ist, eventBlocks usw.

DIVs versteckt ist mit JQuery des „hide()“ Funktion, wenn es relevant ist.

Mein HTML sieht grundsätzlich wie folgt:

<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

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

als Plugin implementiert werden könnte

Answer 2

Dies sollte funktionieren:

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

Sie können etwas Ähnliches tun das Menü auszublenden, wenn alle groupBlocks versteckt sind.

Answer 3

einfachste Weg ist, durch einen einzigen jQuery Selektor:

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

persönlich

, finde ich die not() Funktion besser lesbar, und ich kann end() später verwenden:

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

Jetzt möchten Sie dieversteckens auch? Es scheint, dass ein Menü ausgeblendet werden sollte, wenn es keine sichtbaren eventBlocks hat, was bedeutet, dass es keine sichtbaren groupBlocks hat. So können wir die gleiche Bedingung wie zuvor verwenden:

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