javascript problème prototype

Question

J'ai un problème javascript plutôt basique que je suis claquant ma tête dans un mur au-dessus pendant un certain temps:

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

Fondamentalement, je dois créer une balayeuse qui définit la div pour afficher: aucun si tous les li sont affichés: aucun.

Je pense qu'il commencerait comme:

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

Toutes les suggestions pour de bons tutoriels seraient aussi les bienvenus

Answer 1

Quelque chose comme ça pourrait vous aider à démarrer. Vous devrez parcourir les enfants et vérifier s'ils sont visibles. Si l'un d'eux ne l'est pas, placez un drapeau et sortez de la boucle. Si le drapeau est faux alors vous n'avez pas besoin de cacher le 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

Vous pouvez utiliser la méthode select() de Element pour trouver tous li descendants. Et exécutez une méthode Array.all pour chaque li et vérifiez si tous retournent true. Cachez la div si tout retourne vrai.

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(); 
     } 
    }); 
} 

Ce code n'a pas été testé.

Answer 3

Cette solution est jQuery (Prototype doit être quelque chose de similaire):

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