JavaScript -Prototyp -Problem

Question

Ich habe also ein ziemlich grundlegendes JavaScript -Problem, über das ich seit einiger Zeit meinen Kopf in eine Wand geknallt habe:

<div class='alist'>
   <ul> 
       <li class='group_1'> An Item </li>
       <li class='group_1'> An Item </li>
       <li class='group_2'> An Item </li>
   </ul>
</div>

<div class='alist'>
   <ul> 
       <li class='group_1'> An Item </li>
       <li class='group_1'> An Item </li>
       <li class='group_2'> An Item </li>
   </ul>
</div>


<script>
function toggle_item( num ){
    $$( 'li.group_' + num ).invoke('toggle');
}
</script>

Grundsätzlich muss ich eine Kehrmaschine erstellen, die die DIV auf die Anzeige setzt: Keine, wenn alle LI angezeigt werden: keine.

Ich denke, es würde anfangen wie:

function sweep(){
    $$('div.alist').each( function( s ) {
      ar = s.down().children
    }); 
} 

Alle Vorschläge für gute Tutorials wären ebenfalls willkommen

Answer 1

So etwas könnte Ihnen den Einstieg bringen. Sie müssen durch die Kinder iterieren und prüfen, ob sie sichtbar sind. Wenn einer von ihnen nicht von ihnen ist, stellen Sie eine Flagge und brechen Sie von der Schleife ab. Wenn die Flagge falsch ist, müssen Sie die nicht verbergen div.

function sweep(){
    $$('div.alist').each( function( s ) {
        var shouldHide = true;
        var children = s.down().childElements();
        children.each(function(li) {
            if(li.visible()) {
                shouldHide = false;
                throw $break;
            }
        });

        if(shouldHide) {
            s.hide();
        }
    }); 
} 

Answer 2

Sie könnten die verwenden auswählen() Methode von Element Alle finden li Nachkommenschaft. Und führen Sie eine Methode aus Array.All für jeden li und prüfen Sie, ob alle true zurückkehren. Verstecke die DIV, wenn alle wahr zurückkehren.

function sweep() {
    // check each div
    $$('div.alist').each(function(element) {
        var listItems = element.select('li');
        // are the list items of this div hidden?
        var listItemsHidden = listItems.all(function(item) {
            return item.visible();
        });
        // hide the div too if so
        if(listIemsHidden) {
            element.hide();
        }
    });
}

Dieser Code ist ungetestet.

Answer 3

Dies ist JQuery -Lösung (Prototyp muss etwas Ähnliches sein):

$('div.alist').css('display', function () {
        return $(this).find('li:visible').length < 1 ? 'none' : '';
    });