JavaScript原型问题

Question

所以我有一个相当基本的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设置为display：none，如果所有li都是display：none。

我认为它会这样开始：

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

任何关于好的教程的建议也将受到欢迎

Answer 1

这是 jQuery 解决方案（原型必须类似）：

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

Answer 2

像这样的事情可能会让你开始。您需要遍历子级并检查它们是否可见。如果其中任何一个不是，则设置一个标志并从循环中中断。如果该标志为 false，则无需隐藏 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 3

您可以使用 Element< 的 select() 方法/code> 查找所有 li 后代。并为每个 li< 运行一个方法 Array.all /code> 并检查是否全部返回 true。如果全部返回 true 则隐藏 div。

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

该代码未经测试。