计算 jQuery 可见的 li 元素答案

【问题标题】：Count li elements that are visible with jQuery计算 jQuery 可见的 li 元素
【发布时间】：2012-04-25 13:13:29
【问题描述】：

我使用以下 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 使用jQuery 时，我更改了一些li 元素的style="display: none" 属性，例如：$('.2').show();

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

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

--> 脚本返回：nothing

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

【问题讨论】：

谢谢大家！我想，我的问题出在代码的其他地方 - 但是很奇怪，因为计算脚本正在工作，但是当我添加 :visible它崩溃了。但是我现在正在使用一种解决方法。当我更改 display:none css 属性时，我将一个类 .addClass("countme") 添加到可见的 li 元素中。我现在正在计算所有具有 li.countme 类的 li 元素，感谢您的帮助！

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

【解决方案1】：

对我来说很好

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

在这里工作正常：

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

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

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

感谢您的回复。有了“隐藏”类的想法，我现在正在为每个使用 .show() 更改的元素添加一个类“countme”，它工作正常！

【解决方案5】：

我已经尝试过了，它似乎可以工作，即我得到了“1”的结果。

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

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

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

【讨论】：

谢谢彼得-我想，我的问题在其他地方-但是很奇怪，因为计算正在工作，但是当我添加 :visible 时它崩溃了。但是我现在正在使用一种解决方法。当我更改 display:none css 属性时，我正在向可见的 li 元素添加一个类 '.addClass("countme")'。我现在正在计算所有具有类 li.countme 的 li 元素感谢您的帮助！

【解决方案6】：

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

http://jsfiddle.net/bKyt4/

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

【讨论】：

全部隐藏后仍会返回“0”。

【解决方案9】：

它是这样工作的：

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

您可以查看工作示例there。

【讨论】：