contando divs visibles con nombre de clase jquery

2 minutos de lectura

avatar de usuario de ravi.panch
ravi.panch

Tengo problemas para usar el :visible con nombre de clase.

Ejemplo:

<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 clase level1

$(".level1 :visible").length; me da la salida 3, ¿no se supone que esto es la salida 2?

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

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

Cualquier sugerencia es útil. Gracias

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

Usa esto en su lugar:

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

Ver tu violín por mi actualización.

  • @lonesomeday, ¿alguna forma de que esto se actualice mientras los divs se ocultan/muestran en la página? ¿Te gusta vivir? Funciona muy bien en la carga de la página, pero para una ordenación/búsqueda donde se eliminan los divs, ¿alguna forma de cambiar esto?

    – Clavícula

    4 de junio de 2015 a las 3:50

  • @JamisonHill Cada vez que lo ejecute, le dará el número actual. Deberá volver a ejecutar el selector después de cada cambio. Puede haber formas más elegantes de hacer esto, pero es difícil decirlo sin mirar en profundidad su código.

    – algún día solitario

    04/06/2015 a las 15:20

  • @lonesomeday: aquí hay un jFiddle con mi código. Muy simple pero no se actualiza con la búsqueda: jsfiddle.net/KYjfk/10 Déjame saber lo que piensas.

    – Clavícula

    04/06/2015 a las 18:48

Estoy bastante seguro de que tienes que hacer $(".level1:visible").length;

el espacio está descifrando el código

¿Ha sido útil esta solución?