jquery - 计算 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

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

我现在想用以下脚本更改脚本以仅计算可见的 li 元素（我刚刚在 jQuery 文档之后添加了 :visible ）：

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

--> 脚本返回：没有

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

score 17 · Accepted Answer

对我来说很好

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

JsFiddle 林德：http: //jsfiddle.net/xuckF/1/

score 8 · Accepted Answer

在这里工作正常：

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

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

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

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

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

它是这样工作的：

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

你可以在那里看到工作示例。

score 1 · Accepted Answer

1

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

于 2012-04-13T06:48:01.873 回答

score 1 · Accepted Answer

是的，正如大家已经说过的那样，它工作正常，即使你 .show() 准备好元素文档：

http://jsfiddle.net/bKyt4/

score 0 · Accepted Answer

I have tried this out and it seems to work i.e. I get a result of '1'.

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

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

NB: I don't think having numbers for the value of an attribute is valid markup

score 0 · Accepted Answer

0

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

于 2012-04-13T06:47:51.437 回答

score 0 · Accepted Answer

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

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

jquery - 计算 jQuery 可见的 li 元素

9 回答 9

Related

Reference