elementos Conde li que son visibles con jQuery

Question

Im contando mis elementos li con la siguiente secuencia de comandos de jQuery:

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

- > El script vuelve:

que cambie la propiedad style="display: none" de algunos de los elementos li cuando $(document).ready con jQuery, como: $('.2').show();

ahora quiero cambiar el guión en una manera de contar sólo los elementos li visibles con la siguiente secuencia de comandos (i acaba añadido: visibles después de la documentación de jQuery):

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

-> El script devuelve: nada

no tengo ni idea de por qué no funciona o ut - tal vez alguien tiene alguna sugerencia o idea? Cualquier ayuda es muy apreciada. Gracias por adelantado!

Answer 1

trabajo bien para mí

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

jsFiddle Lind: http://jsfiddle.net/xuckF/1/

Answer 2

funciona bien aquí:

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

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

Ahora, usando números nombres de las clases es ilegal . (W3C Spec, viñeta 2) Los nombres de clase deben comenzar con una letra. Tal vez hacer manipulaciones con eso está causando problemas?

Aparte de eso, solo puedo adivinar que su problema está en otra parte. ¿Estás usando la última versión de jQuery? (Aunque en mis pruebas, funciona todo el camino de regreso a 1.3, y luego no funciona en absoluto)

Escribí mal "visible" en su código actual. (He hecho esto antes)

Answer 3

funciona así:

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

se puede ver ejemplo there de trabajo.

Answer 4

Su secuencia de comandos no devuelve nada porque todas las DIV están ocultas. Devuelve 1 cuando se muestra 1.

Answer 5

Basta con echar un vistazo a esto: http://jsfiddle.net/vnMrQ/

Answer 6

Sí, como todo el mundo ya se ha dicho, que funciona bien, incluso cuando usted.show() el doc elemento de lista:

http://jsfiddle.net/bKyt4/

Answer 7

he intentado esto y parece que funciona es decir consigo una resultado de '1'.

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

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

NB: No creo que con un número para el valor de un atributo es marcado válido

Answer 8

Elemento asumió como oculto o si sus padres no consume espacio en el documento. La visibilidad de CSS no se tiene en cuenta.

Vista:

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

He hecho una jsFiddle para usted: http://jsfiddle.net/mgrcic/3BzKT/3/

Answer 9

En línea uno simplemente definir un div o el intervalo o un párrafo en el que desea mostrar el recuento, y en la segunda línea de la ul li contiene

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