Count li elements that are visible with jQuery

Question

Im counting my li elements with the following jQuery script:

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); 
    });

--> The script returns: 3

I change the style="display: none" property of some of the li elements when $(document).ready with jQuery, like: $('.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):

    $(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!

Conversant

Thanks to all! I think then, my problem is elsewhere in the code - However it is strange, as the couting script is working, but when I add :visible it crashes. However I'm now using a workaround. When I change the display:none css property I'm adding a class .addClass("countme") to the li elements that are visible. I'm now counting all li elements that have the class li.countme Thanks for your help! – Conversant

Answer 1

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/

Varix

Answer 2

Works fine here:

http://jsfiddle.net/jtbowden/FrPPr/ (1 visible)

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

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?

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)

Did you misspell "visible" in your actual code. (I've done this before)

Liber

Answer 3

Element assumed as hidden if it or its parents consumes no space in document. CSS visibility isn't taken into account.

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

.hidden {
    display: none;
}​

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/

Hilarity

Thanks for your reply. With the idea of the "hidden" class, I'm now adding a class "countme" to each element that I'm changing with .show() and it works fine! – Conversant

Answer 4

It works like that:

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

You can see working example there.

Rycca

Answer 5

Just take a look at this: http://jsfiddle.net/vnMrQ/

Trucking

Answer 6

Yep, as everyone has already said, it works fine, even when you .show() the element doc ready:

http://jsfiddle.net/bKyt4/

Torytoryism

Answer 7

Your script returns nothing because all DIV's are hidden. It returns 1 when 1 is shown.

Tommyetommyrot

It will still return "0" when all are hidden. – Liber

Answer 8

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

Belden

Thanks Peter - I think then, my problem is elsewhere - However it is strange, as the couting is working, but when I add :visible it crashes. However I'm now using a workaround. When I change the display:none css property I'm adding a class '.addClass("countme")' to the li elements that are visible. I'm now counting all li elements that have the class li.countme Thanks for your help! – Conversant

Answer 9

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

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

Resile