计算使用jQuery可见的li元素

时间:2012-04-13 06:39:29

标签: jquery html css jquery-selectors html-lists

我使用以下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;脚本返回:

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

9 个答案:

答案 0 :(得分:17)

为我工作

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

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

答案 1 :(得分:8)

在这里工作正常:

http://jsfiddle.net/jtbowden/FrPPr/(1可见)

http://jsfiddle.net/jtbowden/FrPPr/1/(0可见)

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

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

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

答案 2 :(得分:2)

如果元素或其父元素在文档中不占用空间,则该元素假定为隐藏。不考虑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/

答案 3 :(得分:1)

它的工作原理如下:

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

您可以看到工作示例there

答案 4 :(得分:1)

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

答案 5 :(得分:1)

是的,正如大家已经说过的那样,它工作正常,即使你.show()元素doc准备好了:

http://jsfiddle.net/bKyt4/

答案 6 :(得分:0)

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

答案 7 :(得分:0)

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

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

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

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

答案 8 :(得分:0)

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

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