مشكلة النموذج الأولي للجافا سكريبت

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 لعرضها: لا شيء إذا كان كل ما يعرض لي: لا شيء.

أعتقد أنه سيبدأ مثل:

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

أي اقتراحات للحصول على دروس جيدة سيكون موضع ترحيب كذلك

Answer 1

شيء من هذا القبيل قد يبدأك. ستحتاج إلى التكرار من خلال الأطفال وتحقق مما إذا كانت مرئية. إذا لم يكن أي منهم، ضع علامة وكسر من الحلقة. إذا كانت العلم خاطئا، فأنت لا تحتاج إلى إخفاء 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

يمكنك استخدام تحديد() طريقة Element للعثور على الكل li أحفاد. وتشغيل طريقة array.all. لكل شيء li والتحقق مما إذا كان كل الإرجاع صحيح. إخفاء 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();
        }
    });
}

هذا الرمز مختبر.

Answer 3

هذا هو الحل المسج (يجب أن يكون النموذج الأولي شيء مماثل):

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