Вопрос

Так что у меня довольно простая проблема с JavaScript, которую я некоторое время врезал голову в стену:

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

По сути, мне нужно создать подметальную машину, которая устанавливает Div для отображения: нет, если все LI отображаются: нет.

Я думаю, что это начнется как:

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

Любые предложения для хороших учебников также будут приветствовать

Это было полезно?

Решение

Что -то подобное может заставить вас начать. Вам нужно будет переходить через детей и проверить, если они видны. Если кто -то из них не так, установите флаг и выложите из петли. Если флаг ложный, то вам не нужно скрывать 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();
        }
    }); 
} 

Другие советы

Вы можете использовать Выбрать() метод Element Чтобы найти все li потомки. И запустить метод Массив. Все для каждого li и проверьте, верните ли все это. Скрыть Div, если все верните True.

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

Этот код не проверен.

Это решение jQuery (прототип должен быть чем -то подобным):

$('div.alist').css('display', function () {
        return $(this).find('li:visible').length < 1 ? 'none' : '';
    });
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top