Problème du prototype JavaScript

Question

J'ai donc un problème JavaScript plutôt basique sur lequel j'ai claqué la tête dans un mur 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, j'ai besoin de créer une balayeuse qui définit le div à afficher: aucun si tous les Li sont affichés: aucun.

Je pense que ça commencerait comme:

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

Toutes les suggestions de bons tutoriels seraient également les bienvenues

Answer 1

Quelque chose comme ça pourrait vous aider à démarrer. Vous devrez itérer à travers les enfants et vérifier s'ils sont visibles. Si l'un d'eux ne le fait pas, définissez un drapeau et brisez la boucle. Si l'indicateur est faux, vous n'avez pas besoin de masquer 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 le sélectionner() méthode de Element pour trouver tout li descendance. Et exécuter une méthode Array. pour chaque li et vérifiez si tous reviennent vrai. Cachez le div si tous reviennent 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'est pas testé.

Answer 3

Ceci est une solution jQuery (le prototype doit être quelque chose de similaire):

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