Question

I use .is(':visible') method in jquery but it does not work as expected.

Here is my code snippet

What did I miss there?

HTML:

<div class="str">

    <ul><li>1</li><li><a href="#">hide</a></li></ul>
    <ul><li>2</li><li><a href="#">hide</a></li></ul>
    <ul><li>3</li><li><a href="#">hide</a></li></ul>
    <ul><li>4</li><li><a href="#">hide</a></li></ul>
    <ul><li>5</li><li><a href="#">hide</a></li></ul>
    <ul><li>6</li><li><a href="#">hide</a></li></ul>

    <div class="length"></div>

</div>

jQuery:

$(function(){

    $('.str ul').find('a').live('click',function(){
       $(this).closest('li').parent().hide();
       var ll= $('.str').find('ul').each(function(){  
           $('.length').text( $('.str').find('ul').is(':visible').length );  
        });   
    });

});

Answer 1

Use: $('.str').find('ul:visible').length

jsFiddle demo

$(function(){
    
    $('.str ul').on('click','a',function(){    
       $(this).closest('li').parent().hide();
        
       var visibleUL = $('.str').find('ul:visible').length;      
       $('.length').text( visibleUL );        
       alert(visibleUL );
        
    });
    
});

While .is() returns a boolean value ( true / false ), the :visible selector targets the desired elements creating an elements array collection – exactly what you need to return a valid array length