Count li elements that are visible with jQuery

css, html, html-lists, jquery, jquery-selectors

Solution

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/

Problem

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!

Original source