计算 jQuery 可见的 li 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10136314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Count li elements that are visible with jQuery
提问by Dominic
Im counting my li elements with the following jQuery script:
我使用以下 jQuery 脚本计算我的 li 元素：
HTML:
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:
jQuery：
$(function() {
var numrelated=$('.relatedelements > li').length;
$('.num-relatedelements').html(numrelated);
});
--> The script returns: 3
--> 脚本返回：3
I change the style="display: none"property of some of the li elements when $(document).readywith jQuery, like: $('.2').show();
我style="display: none"在$(document).ready使用 jQuery时更改了一些 li 元素的属性，例如：$('.2').show();
I now want to change the script in a way to count only the visible li elements with the following script (i just added :visible following the jQuery docs):
我现在想更改脚本以仅使用以下脚本计算可见的 li 元素（我刚刚在 jQuery 文档之后添加了 :visible ）：
$(function() {
var numrelated=$('.relatedelements > li:visible').length;
$('.num-relatedelements').html(numrelated);
});
--> The script returns: nothing
--> 脚本返回：无
I have no clue why it doesn't work out - maybe anyone has any tip or idea? Any help is much appreaciated. Thanks upfront!
我不知道为什么它不起作用 - 也许有人有任何提示或想法？任何帮助都非常感谢。先谢谢了！
回答by Rony SP
work fine for me
对我来说很好用
$(document).ready(function(){
$('.2').show();
var numrelated=$('.relatedelements > li:visible').length;
$('.num-relatedelements').html(numrelated);
});?
JsFiddle Lind : http://jsfiddle.net/xuckF/1/
JsFiddle 林德：http: //jsfiddle.net/xuckF/1/
回答by Jeff B
Works fine here:
在这里工作正常：
http://jsfiddle.net/jtbowden/FrPPr/(1 visible)
http://jsfiddle.net/jtbowden/FrPPr/（1可见）
http://jsfiddle.net/jtbowden/FrPPr/1/(0 visible)
http://jsfiddle.net/jtbowden/FrPPr/1/（0可见）
Now, using numbers as class names is illegal. (W3C Spec, bullet 2) Class names must start with a letter. Maybe doing manipulations with that is causing problems?
现在，使用数字作为类名是非法的。( W3C Spec, bullet 2) 类名必须以字母开头。也许对它进行操作会导致问题？
Other than that, I can only guess your problem is elsewhere. Are you using the latest version of jQuery? (Although in my tests, it works all the way back to 1.3, and then it doesn't work at all)
除此之外，我只能猜测你的问题在别处。您使用的是最新版本的 jQuery 吗？（虽然在我的测试中，它一直运行到 1.3，然后它根本不起作用）
Did you misspell "visible" in your actual code. (I've done this before)
您是否在实际代码中拼错了“visible”。（我以前做过）
回答by Matija Grcic
Element assumed as hidden if it or its parents consumes no space in document. CSS visibility isn't taken into account.
如果元素或其父元素不占用文档中的空间，则该元素被假定为隐藏。不考虑 CSS 可见性。
View:
看法：
<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
CSS
.hidden {
display: none;
}?
JS
JS
$(function() {
var numrelated= $('.relatedelements > li:not(.hidden)').length;
alert(numrelated);
$('.num-relatedelements').html(numrelated);
});?
I've made a jsfiddle for you: http://jsfiddle.net/mgrcic/3BzKT/3/
我为你做了一个 jsfiddle：http: //jsfiddle.net/mgrcic/3BzKT/3/
回答by PrimosK
回答by Marcin Wieprzkowicz
Just take a look at this: http://jsfiddle.net/vnMrQ/
看看这个：http: //jsfiddle.net/vnMrQ/
回答by Charlie Sheather
Yep, as everyone has already said, it works fine, even when you .show() the element doc ready:
是的，正如每个人已经说过的，它工作正常，即使你 .show() 元素文档准备好了：
回答by Peter
I have tried this out and it seems to work i.e. I get a result of '1'.
我已经试过了，它似乎有效，即我得到了“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
注意：我认为属性值的数字不是有效标记
回答by ONOZ
Your script returns nothing because all DIV's are hidden. It returns 1 when 1 is shown.
您的脚本不返回任何内容，因为所有 DIV 都已隐藏。显示 1 时返回 1。
回答by Salman Aziz
In line one simply define a div or span or paragraph where you want to display count, and in second line the ul containing li
在第一行简单地定义一个 div 或 span 或段落，你想在其中显示计数，第二行 ul 包含 li
$('.notify').html(
$('#ul-notifications li').length);
