2011-01-11 18 views
11

Tengo problemas para usar: visible con nombre de clase.contando divs visibles con nombre de clase jquery

Ex:

<div class="groupedDiv" id="group1"> 
    <div class="level1"> 
     Apples 
     <div class="level2"> || L2-apple </div> 
    </div> 

    <div class="level1" style="display:none;"> 
     Oranges 
     <div class="level2"> || [L2-orange] </div> 
    </div> 
</div> 

<br/> 

<div class="groupedDiv" id="group1"> 
    <div class="level1"> 
     Roses 
     <div class="level2"> || L2-rose </div> 
     <div class="level3"> l3 rose </div> 
    </div> 
</div> 

Si quiero contar el # de divs visibles de la clase "level1"

$(".level1 :visible").length; me da salida 3, duerma esta supuesta a la salida 2?

$(".level1 :visible").parent().length; me da salida 2, que es correcta

He creado este ejemplo a http://jsfiddle.net/metalhawk/P87jS/

Cualquier sugerencia es útil. Gracias

Respuesta

34

$(".level1 :visible") es un selector descendente: está seleccionando todos los elementos visibles que son descendientes de .level1. Hay tres elementos div que están visibles debajo de los elementos .level1.

Use este lugar:

$(".level1:visible").length; 

See your fiddle per my update.

+0

@lonesomeday, de ninguna manera por esta actualizándose mientras divs Ocultar/mostrar en la página? Como en vivo? Funciona muy bien en la carga de la página, pero para una ordenación/búsqueda donde se eliminan los divs, ¿hay alguna forma de que esto cambie? – Collarbone

+0

@JamisonHill Siempre que lo ejecute, dará el número actual. Tendría que ejecutar el selector nuevamente después de cada cambio. Puede haber formas más elegantes de hacer esto, pero es difícil de decir sin mirar en profundidad su código. – lonesomeday

+0

@lonesomeday - Aquí hay un jFiddle con mi código. Muy simple, pero no se está actualizando con la búsqueda: http://jsfiddle.net/KYjfk/10/ Déjame saber lo que piensas. – Collarbone

4

Bastante seguro de que tiene que hacer $(".level1:visible").length;

el espacio se está rompiendo el código

+0

Ahh ... Gracias dpmguise. – metalhawk