javascript - .is(':visible') は jQuery では機能しません

Question

jquery でメソッドを使用.is(':visible')していますが、期待どおりに動作しません。

ここに私のコードスニペットがあります

私はそこで何を逃したのですか？

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

使用する：$('.str').find('ul:visible').length

jsFiddle デモ

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

.is()ブール値 ( true / false)を返しますが、:visibleセレクターは要素配列コレクションを作成する目的の要素をターゲットにします。これはまさに有効な配列を返すために必要なものです。length

Answer 2

.is()メソッドが返すtrueか、false

ドキュメントから：

他のフィルタリング メソッドとは異なり、.is() は新しい jQuery オブジェクトを作成しません。

使用するfind()かどうfilter()かis()。

Answer 3

is(':visible')jQuery オブジェクトではなくブール値を返します。

// Wrong
if ($selector.is(':visible').length) {

// Right
if ($selector.is(':visible')) {

Answer 4

その奇妙な HTML を実際のリストに変更します。それぞれ 1 つの項目を持つ一連のリストではありません。

<div class="str">
    <ul>
        <li>1<br><a href="#">hide</a></li>
        <li>2<br><a href="#">hide</a></li>
        <li>3<br><a href="#">hide</a></li>
        <li>4<br><a href="#">hide</a></li>
        <li>5<br><a href="#">hide</a></li>
        <li>6<br><a href="#">hide</a></li>
    </ul>
    <div class="length"></div>
</div>​

そして、次のようにします。

$(function() {
    $('a', '.str ul').on('click', function() {
        $(this).closest('li').hide();
        $('.length').text($('.str ul li:visible').length);
    });
})​;​

フィドル