javascript
  • jquery
  • html
  • css
  • dom
  • 2009-08-03 198 views 14 likes 
    14

    ¿Cómo verificaría si todos los div's con prueba de clase están ocultos? Y si están todos ocultos, configure wrap1 en hidden. Gracias.Use jQuery para verificar si todos los div están ocultos

    <div id='wrap1'> 
    <div class="header">Header 1</div> 
    <div class='test'><a href="#">Test 1</a></div> 
    <div class='test'><a href="#">Test 2</a></div> 
    <div class='test'><a href="#">Test 3</a></div> 
    </div> 
    

    ACTUALIZACIÓN: Gracias a todos por las respuestas muy rápidas, lo tengo trabajo. Todos fueron muy útiles.

    +0

    ¿Alguien puede editar el título de la pregunta? Estaba buscando "todos los div con la misma clase", y casi lo apruebo. Pregunta de votaciones ascendentes – Jason

    Respuesta

    33

    Usted puede hacer el cheque como mediante el uso de selección como se sugirió anteriormente y que de esta manera:

    if ($("div.test:visible").length === 0) 
         $("#wrap1").hide(); 
    
    +0

    También puede cambiar 'if ($ (" div. test: visible "). length === 0)' línea al 'if (! $ (" div.test: visible "). length)'. –

    0

    Una mejor forma de ver si están todos visibles es el recuento de visibilidad igual que el recuento total.

    $("#wrap1 div:visible").length == $("#wrap1 div").length 
    
    +0

    Tiene que calificar esto con la prueba de clase apropiada. De acuerdo con el OP, la envoltura debe ser oculto si los DIV clasificados como "testN" están ocultos incluso si el DIV del "encabezado" no está. – tvanfosson

    7

    Este fragmento se repetirá todo <div id="wrap#"> y ocultarlos si la prueba se ocultan.

    $("div[id^='wrap']").each(function() { 
        var wrap = $(this); 
    
        if(wrap.children("div[class^='test']:visible").length == 0) { 
        wrap.hide(); 
        } else { 
        wrap.show(); 
        } 
    }); 
    

    Si aún desea mantener su <div id="wrap#"> visible si no hay ninguna prueba en absoluto (como en ninguno en el margen de beneficio), puede utilizar el siguiente fragmento modificado:

    $("div[id^='wrap']").each(function() { 
        var wrap = $(this); 
    
        if(wrap.children("div[class^='test']").length > 0 && 
        wrap.children("div[class^='test']:visible").length == 0) { 
        wrap.hide(); 
        } else { 
        wrap.show(); 
        } 
    }); 
    

    No hay razón convincente para las clases de números (que no sean casos extremos). Su numeración complica el código anterior así como su CSS. Sería más fácil simplemente eliminar la numeración de test. (Usted no lo necesita ya que siempre puede seleccionar un subconjunto de ellos utilizando :lt(index), :gt(index), :eq(index), :first y :last.

    En cuanto a los identificadores de numeración, eso está bien, ya que cada id debe ser único.

    +0

    Tenga en cuenta que esto también ocultaría el divisor de envoltura si no hubiera divs con una clase coincidente. No estoy seguro de si ese es el comportamiento deseado o no. – tvanfosson

    +0

    ** @ tvanfosson: ** Técnicamente, si no hay 'div.test' en el marcado, es lo mismo que no tener' div.test' visible. Estoy bastante seguro de que el comportamiento deseado. –

    +0

    Si solo deseaba el comportamiento cuando había divs pero estaban todos ocultos, puede verificar para asegurarse de que el recuento oculto sea el mismo que el recuento visible. – tvanfosson

    0
    jQuery("#wrap1").find("div").each(function() 
        { 
         if ($(this).is(':hidden')) 
         { 
         } 
        } 
    ); 
    
    Cuestiones relacionadas