计算使用jQuery可见的li元素

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

- >脚本返回： 3

当$(document).ready with jQuery时，我改变了某些li元素的style="display: none"属性，如： $('.2').show();

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

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

- >脚本返回： 没有

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

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

你可以看到那里的工作实例。

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