jQuery detectar elementos visibles pero ocultos

Esta parece que debería ser bastante fácil - pero no puedo encontrar el selector hacia la derecha para quejQuery detectar elementos visibles pero ocultos

De acuerdo con los documentos (http://api.jquery.com/hidden-selector/ y http://api.jquery.com/visible-selector/) ...

Elementos puede considerarse oculto por varias razones:

Un elemento ancestro está oculto, por lo que el elemento no se muestra en la página.

Lo que quiero detectar es "este elemento es visible, pero está contenido en un elemento primario oculto". Es decir, si hiciera visible al padre, este elemento también sería visible.

Fuente

2010-03-31 Paul

Si esto es algo que va a utilizar habitualmente, hace su propio selector :) He aquí un ejemplo:

jQuery.expr[':'].hiddenByParent = function(a) { 
    return jQuery(a).is(':hidden') && jQuery(a).css('display') != 'none'; 
};

Usted puede utilizar de esta manera, la prueba de marcado:

<div style="display: none" id="parent"> 
    <div> 
     <div id="child">Test</div> 
    </div> 
</div>

ejemplos de utilizar:

$("div:hiddenByParent").length; // "2" (plain div + child match) 
$("#child").is(":hiddenByParent"); // true

como alternativa, puede utilizar la función .filter() así:

$('selector').filter(function() { 
    return $(this).is(':hidden') && $(this).css('display') != 'none'; 
}

Fuente

2010-03-31 15:59:11

¡Una gran respuesta, como siempre, Nick!Pero si un elemento tiene la visibilidad configurada como oculta, necesitará usar esto como el selector 'return $ (a) .is (': hidden') && $ (a) .css ('display')! = ' none '&& $ (a) .css (' visibility ') ==' visible '; ' – Mottie

@fudgey - Buen punto, las cosas' visibles' no están "ocultas", pero ocupan el espacio en la página. Supongo que depende si estás buscando cosas totalmente ocultas o cosas que no ocupan espacio en absoluto en la página. Sea cual sea la definición que persigas, utiliza ese enfoque con seguridad. –

¡Brillante! Solo la respuesta que quería y el primer resultado de Google también. Solo agregaría que creo que un nombre de selector más bonito sería ": invisible". Es "visible" ... pero * en * visible. –

-1

No creo que sólo un selector funcionaría, pero

<script> 
function parentHidden(id) { 
    return (!$(id).is(':hidden')) && $(id).parent().is(':hidden'))); 
}   
</script>

debe devolver lo que necesita. Si necesita comprobar sus antepasados y no solo sus padres, podría simplemente reemplazar la parte $(id).parent().is(':hidden') con una función que se repite hasta la 'cadena antecesora'.

Fuente

2010-03-31 14:05:52

Pero eso es exactamente lo que no quiero ... en particular el punto 4. También dice "Un elemento se supone que se oculta si él o cualquiera de sus padres no consume espacio en el documento " – Paul

ah, ya veo, lo siento. actualización de respuesta. –

Pero eso no me dice si el elemento es realmente visible; simplemente dice si el padre es visible, lo cual no era exactamente la pregunta – Paul

Si se trata de un elemento específico que usted está buscando, entonces podrías comprobar que es propiedad de presentación

$('#element').css('display') != 'none';

Si no fuera un elemento específico, entonces usted podría encontrar los nodos principales, que están ocultos usando: oculta luego use una función personalizada para buscar nodos del tipo que desee. P. ej.

$('parent-selector:hidden').find('node-selector').each(function(){ 
    if($(this).css('display') != 'none') { 
    // do what you wanted 
    } 
});

Si desea un selector limpia entonces creo que va a estar fuera de suerte que no creo que lo que quiere es parte de la especificación CSS, por lo que no estará allí como una selector en jQuery.

Fuente

2010-03-31 14:51:46

jQuery tiene todo esto integrado hoy en dia

$("#child").closest(':hidden').length == 0

Fuente

2012-03-02 17:07:41 root

jQuery detectar elementos visibles pero ocultos

Respuesta

Cuestiones relacionadas