Check if all children elements are hidden

问题:

I'm a bit stuck here with my script:

Its a checkbox filtering all .notme images and hiding it's list items. The problem is now I cant get a working callback function for the fadeToggle. It should behave like this :

If all children of #list-team-single-container are "displayed none" - do something.

$('#show-only-my-teams').change(function(){
    $('.notme').each(function(){
        $(this).parent().parent().fadeToggle('fast', function(){
        });
    });
}); 

回答1:

if($('#list-team-single-container').children(':visible').length == 0) {
   // action when all are hidden
}

回答2:

The :visible jQuery selector might be what you are looking for...

From the description

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation. During animations to show an element, the element is considered to be visible at the start at the animation.

http://api.jquery.com/visible-selector/

---

$('#list-team-single-container').children(':visible');

That line of code will return all of the child elements of #list-team-single-container that are visible.

$('#list-team-single-container').children(':visible').length;

That line of code will return the number of child elements of #list-team-single-container that are visible.

回答3:

It's difficult to be specific without seeing your markup, but I'd imagine doing something like this:

var isVisible = 0;

$('.notme').each( function() {
    if( $(this).is(":visible") {
         isVisible++;
    }
});

if ( isVisible == 0 )
    // do something