我使用以下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;脚本返回:无
我不知道为什么它不起作用 - 也许任何人有任何提示或想法? 任何帮助都是很有帮助的。先谢谢!
答案 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)
答案 5 :(得分:1)
是的,正如大家已经说过的那样,它工作正常,即使你.show()元素doc准备好了:
答案 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);