Question

我有以下代码：

var len = $(".per:visible").length;

$("#add-person").click(function(){
    if ($(".persons div:visible").next().is(':hidden')){

        $(".persons div:visible").next().slideDown('slow' , function(){
                console.log(len);
                if ( $(".persons div:hidden").length == 10){
                    $("#add-person").hide(); //Hide button once visible divs equal 10.
                }
            });
    }
    return false;
});

HTML：

<div class="persons">
    <div class="per"> <!-- Contains other divs and other HTML --> </div>
    <div class="per"> <!-- Contains other divs and other HTML --> </div>
    <div class="per"> <!-- Contains other divs and other HTML --> </div>
    <div class="per"> <!-- Contains other divs and other HTML --> </div>
    <div class="per"> <!-- Contains other divs and other HTML --> </div>
    <div class="per"> <!-- Contains other divs and other HTML --> </div>
    <div class="per"> <!-- Contains other divs and other HTML --> </div>
    <div class="per"> <!-- Contains other divs and other HTML --> </div>
    <div class="per"> <!-- Contains other divs and other HTML --> </div>
    <div class="per"> <!-- Contains other divs and other HTML --> </div>
</div>

CSS：

.per{
     display:none;
}

.per:first-child { display:block; }

当我点击触发上述功能的按钮时，我希望看到类.per的可见div数，但它总是返回0.

我误解了什么吗？从我读到的内容来看，这是我检查可见div的方式。有什么问题？

Answer 1

默认情况下，所有div.per元素都会被隐藏。尝试在CSS文件下添加此CSS

.per:first-child { display:block; }

你会发现差异。

Answer 2

以下代码可以解决您的可见和不可见div的问题。

var visible=0, invisible=0;
$('.per').each(function(){
if($(this).is(':visible'))
{
    visible++;
}
else
{
    invisible++;
}
})

这是你问题的工作小提琴

Fiddle

Answer 3

您已使用display:none

中的.per隐藏了所有div

尝试设置至少一个div visible。

检查可见的Div不工作？

3 个答案: