Question

So I have a rather basic javascript problem which I have been slamming my head into a wall over for awhile:

<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>

Basically, I need to create a sweeper that sets the div to display:none if all the li are display:none.

I think it would start like:

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

Any suggestions for good tutorials would be welcome as well

Answer 1

Something like this might get you started. You’ll need to iterate through the children and check if they’re visible. If any of them aren’t, set a flag and break from the loop. If the flag is false then you don’t need to hide the 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();
        }
    }); 
}