Question

我使用以下jQuery脚本计算我的li元素：

HTML：

<ul class="relatedelements">
   <li style="display:none;" class="1">anything</li>
   <li style="display:none;" class="2">anything</li>
   <li style="display:none;" class="3">anything</li>
</ul>

jQuery的：

    $(function() {
        var numrelated=$('.relatedelements > li').length;
        $('.num-relatedelements').html(numrelated); 
    });

- ＆GT;该脚本返回： 3

我使用jQuery在style="display: none"时更改某些li元素的$(document).ready属性，例如：$('.2').show();

我现在想以一种方式更改脚本，只使用以下脚本计算可见的li元素（我刚刚添加：jQuery docs后可见）：

    $(function() {
        var numrelated=$('.relatedelements > li:visible').length;
        $('.num-relatedelements').html(numrelated); 
    });

- ＆GT;脚本返回：无

我不知道为什么它不起作用 - 也许任何人有任何提示或想法？任何帮助都是很有帮助的。先谢谢！

Answer 1

为我工作

$(document).ready(function(){
    $('.2').show();
    var numrelated=$('.relatedelements > li:visible').length;
    $('.num-relatedelements').html(numrelated); 
});

JsFiddle Lind：http://jsfiddle.net/xuckF/1/

Answer 2

在这里工作正常：

http://jsfiddle.net/jtbowden/FrPPr/（1可见）

http://jsfiddle.net/jtbowden/FrPPr/1/（0可见）

现在，使用数字作为类名非法。（W3C Spec，bullet 2）班级名称必须以字母开头。也许用它进行操作会导致问题？

除此之外，我只能猜测你的问题在别的地方。您使用的是最新版本的jQuery吗？（虽然在我的测试中，它一直可以回到1.3，但它根本不起作用）

您是否在实际代码中拼错了“可见”。（我以前做过这个）

Answer 3

如果元素或其父元素在文档中不占用空间，则该元素假定为隐藏。不考虑CSS可见性。

查看：

<ul class="relatedelements"> <li class="1 hidden">anything</li> <li class="2 hidden">anything</li> <li class="3 hidden">anything</li> <li class="4">anything</li> <li class="5">anything</li> <li class="6">anything</li> <li class="7 hidden">anything</li> </ul> <div class="num-relatedelements"></div>

<强> CSS

.hidden { display: none; }

<强> JS

$(function() { var numrelated= $('.relatedelements > li:not(.hidden)').length; alert(numrelated); $('.num-relatedelements').html(numrelated); });

我为你做了一个jsfiddle：http://jsfiddle.net/mgrcic/3BzKT/3/

Answer 4

它的工作原理如下：

$(function() {
    var numrelated=$('.relatedelements > li:visible').length;
    $('.num-relatedelements').html(numrelated); 
});

您可以看到工作示例there。

Answer 5

看看这个： http://jsfiddle.net/vnMrQ/

Answer 6

是的，正如大家已经说过的那样，它工作正常，即使你.show（）元素doc准备好了：

http://jsfiddle.net/bKyt4/

Answer 7

您的脚本不会返回任何内容，因为所有DIV都是隐藏的。当显示1时，它返回1.

Answer 8

我尝试了这个，似乎有效，即我得到'1'的结果。

$(function() {
    $('.2').show();

    var numrelated=$('.relatedelements > li:visible').length;
    $('.num-relatedelements').html(numrelated); 
});

注意：我认为属性值的数字不是有效标记

Answer 9

在第一行中，只需定义要显示计数的div或span或段落，在第二行中定义包含li的ul

 $('.notify').html(
 $('#ul-notifications li').length);

计算使用jQuery可见的li元素

9 个答案: