[Javascript] ¿Cómo puedo verificar si un elemento está oculto en jQuery?


Answers

Puedes usar el selector hidden :

// Matches all elements that are hidden
$('element:hidden')

Y el selector visible :

// Matches all elements that are visible
$('element:visible')
Question

Es posible alternar la visibilidad de un elemento, utilizando las funciones .hide() , .show() o .toggle() .

¿Cómo probarías si un elemento está visible u oculto?




Tal vez puedas hacer algo como esto

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>




Esto funciona para mí, y estoy usando show() y hide() para hacer mi div oculto / visible:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}



Uno puede simplemente usar el atributo hidden o visible , como:

$('element:hidden')
$('element:visible')

O puede simplificar lo mismo con es el siguiente.

$(element).is(":visible")



Se puede crear una función para verificar los atributos de visibilidad / visualización con el fin de evaluar si el elemento se muestra en la interfaz de usuario o no.

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

Fiddle de trabajo




Después de todo, ninguno de los ejemplos me satisface, así que escribí el mío.

Pruebas (sin soporte del filter:alpha de Internet Explorer filter:alpha ):

a) Verifique si el documento no está oculto

b) Compruebe si un elemento tiene ancho / alto / opacidad o display:none cero display:none / visibility:hidden en estilos en línea

c) Compruebe si el centro (también porque es más rápido que probar cada píxel / esquina) del elemento no está oculto por otro elemento (y todos los antepasados, por ejemplo: overflow:hidden / desplazamiento / un elemento sobre otro) o bordes de la pantalla

d) Compruebe si un elemento tiene ancho / alto / opacidad o display:none cero display:none / visibilidad: oculto en los estilos calculados (entre todos los antepasados)

Probado en

Android 4.4 (navegador nativo / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Internet Explorer 5-11 modos de documentos + Internet Explorer 8 en una máquina virtual), Safari (Windows / Mac / iOS)

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

Cómo utilizar:

is_visible(elem) // boolean



A menudo, al verificar si algo es visible o no, vas a adelantarlo inmediatamente y a hacer algo más con él. El encadenamiento jQuery lo hace fácil.

Entonces, si tiene un selector y quiere realizar alguna acción solo si está visible u oculto, puede usar filter(":visible") o filter(":hidden") seguido de encadenarlo con la acción que desea tomar.

Entonces, en lugar de una declaración if , así:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

O más eficiente, pero aún más feo:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

Puedes hacerlo todo en una sola línea:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });



También aquí hay una expresión condicional ternaria para verificar el estado del elemento y luego alternarlo:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });



Cuando se prueba un elemento contra :hidden selector :hidden en jQuery, se debe considerar que un elemento de posición absoluta se puede reconocer como oculto, aunque sus elementos secundarios son visibles .

Esto parece un tanto contra-intuitivo, en primer lugar, aunque al mirar más de cerca la documentación de jQuery se obtiene la información relevante:

Los elementos pueden considerarse ocultos por varias razones: [...] Su ancho y alto están explícitamente establecidos en 0. [...]

Entonces esto realmente tiene sentido con respecto al modelo de caja y el estilo calculado para el elemento. Incluso si el ancho y el alto no están configurados explícitamente en 0, pueden establecerse implícitamente .

Echa un vistazo al siguiente ejemplo:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

ACTUALIZACIÓN PARA JQUERY 3.x:

¡Con jQuery 3 el comportamiento descrito cambiará! Los elementos se considerarán visibles si tienen cuadros de diseño, incluidos los de ancho y / o altura cero.

JSFiddle con jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

El mismo JS tendrá esta salida:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false



Yo usaría la clase CSS .hide { display: none!important; } .hide { display: none!important; } .

Para ocultar / mostrar, llamo .addClass("hide")/.removeClass("hide") . Para verificar la visibilidad, uso .hasClass("hide") .

Es una manera simple y clara de verificar / ocultar / mostrar elementos, si no planea usar los .toggle() o .animate() .




Utilice el alternar de clase, no la edición de estilo. . .

Usar clases designadas para "ocultar" elementos es fácil y también uno de los métodos más eficientes. Alternar una clase 'oculta' con un estilo de Display de 'ninguno' funcionará más rápido que la edición de ese estilo directamente. Expliqué bastante bien esto en la pregunta de desbordamiento de pila. Girando dos elementos visibles / escondidos en el mismo div .

Mejores prácticas y optimización de JavaScript

Aquí hay un video realmente esclarecedor de un ingeniero inicial de Google Tech Talk, Nicholas Zakas:




if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}



¡Para ver si no es visible, lo uso ! :

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

O lo siguiente también es el sam, guardando el selector jQuery en una variable para tener un mejor rendimiento cuando lo necesite varias veces:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}



Ninguna de estas respuestas aborda lo que entiendo que es la pregunta, que es lo que estaba buscando, "¿Cómo manejo los elementos que tienen visibility: hidden ?" . Ni :visible ni :hidden se encargará de esto, ya que ambos buscan visualización según la documentación. Por lo que pude determinar, no hay un selector para manejar la visibilidad de CSS. Así es como lo resolví (selectores jQuery estándar, puede haber una sintaxis más condensada):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});



ebdiv debe establecerse en style="display:none;" . Es trabajos para show y hide:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});





Links