false - jquery visible true

jQuery detecta elementos visibles pero ocultos

Question

Parece que debería ser bastante fácil, pero no puedo encontrar el selector correcto para él

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

Los elementos se pueden considerar ocultos 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.

Answer 1

No creo que solo un selector funcione, pero

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

debería 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 recurriría en la ''cadena ancestro''.

Answer 2

Si esto es algo que usará comúnmente, haga su propio selector :) Aquí hay un ejemplo:

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

Puedes usarlo así, prueba de marcado:

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

Ejemplos de uso:

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

Alternativamente, puede usar la función .filter() como esta:

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

Answer 3

Si se trata de un elemento específico que está buscando, entonces puede verificar su propiedad de visualización

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

Si no fuera un elemento específico, entonces podría encontrar los nodos principales que están ocultos usando: oculto y luego use una función personalizada para buscar los 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 quieres un selector limpio entonces creo que vas a tener mala suerte ya que no creo que lo que quieres sea parte de la especificación de CSS, por lo que no estará allí como un selector en jQuery.

Answer 4

jQuery tiene todo esto incorporado ahora

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