.is(':visible')在jQuery中不起作用

时间:2012-08-20 08:36:14

标签: javascript jquery html

我在jquery中使用.is(':visible')方法但它没有按预期工作。

Here is my code snippet

我在那里错过了什么?

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

});

4 个答案:

答案 0 :(得分:6)

使用:$('.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 );

    });

});

虽然.is()返回一个布尔值(true / false),但:visible选择器会定位创建元素数组集合的所需元素 - 正是您返回有效数组所需的内容{{1 }}

答案 1 :(得分:4)

.is()方法返回truefalse

来自the docs

  

与其他过滤方法不同,.is()不会创建新的jQuery对象。

您应该使用find()filter()而不是is()

答案 2 :(得分:1)

is(':visible')返回一个布尔值,而不是一个jQuery对象:

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

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

答案 3 :(得分:1)

我会将奇怪的HTML更改为实际列表,而不是一堆包含每个项目的列表:

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

FIDDLE