Pregunta ¿Cómo puedo verificar si un elemento está oculto en jQuery?


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

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


6694
2017-10-07 13:03


origen


Respuestas:


Dado que la pregunta se refiere a un solo elemento, este código podría ser más adecuado:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

Igual que sugerencia de twernt, pero aplicado a un solo elemento; y coincide con el algoritmo recomendado en las preguntas frecuentes de jQuery


8283
2017-10-07 13:30



Puedes usar el hidden selector:

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

Y el visible selector:

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

1261
2017-10-07 13:16



if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

El método anterior no considera la visibilidad del padre. Para considerar al padre también, debe usar .is(":hidden") o .is(":visible").

Por ejemplo,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

El método anterior considerará div2 visible mientras :visible no. Pero lo anterior puede ser útil en muchos casos, especialmente cuando necesita encontrar si hay algún divs de error visible en el padre oculto porque en tales condiciones :visible no trabajará.


783
2017-10-07 13:09



Ninguna de estas respuestas aborda lo que entiendo que es la pregunta, que es lo que estaba buscando, "¿Cómo manejo los artículos que tienen visibility: hidden? ". Ninguno :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
    }
});

450
2018-03-24 18:44



De ¿Cómo determino el estado de un elemento alternado?


Puede determinar si un elemento está contraído o no utilizando el :visible y :hidden selectores

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Si simplemente está actuando sobre un elemento basado en su visibilidad, puede simplemente incluir :visible o :hidden en la expresión del selector. Por ejemplo:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

321
2018-01-13 21:13



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 if declaración, como esta:

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" });

235
2017-07-25 10:21



los :visible selector de acuerdo a la documentación jQuery:

  • Ellos tienen un CSS display valor de none.
  • Son elementos de forma con type="hidden".
  • Su ancho y alto están explícitamente establecidos en 0.
  • Un elemento ancestro está oculto, por lo que el elemento no se muestra en la página.

Elementos con visibility: hidden o opacity: 0 se consideran visibles, ya que aún consumen espacio en el diseño.

Esto es útil en algunos casos e inútil en otros, porque si desea verificar si el elemento está visible (display != none), ignorando la visibilidad de los padres, encontrarás que hacerlo .css("display") == 'none' no solo es más rápido, sino que también devolverá la verificación de visibilidad correctamente.

Si desea verificar la visibilidad en lugar de mostrar, debe usar: .css("visibility") == "hidden".

También tome en consideración las notas jQuery adicionales:

Porque :visible es una extensión jQuery y no forma parte de la especificación CSS, las consultas que utilizan :visible no puede aprovechar el aumento de rendimiento proporcionado por el DOM nativo querySelectorAll() método. Para lograr el mejor rendimiento al usar :visible para seleccionar elementos, primero seleccione los elementos usando un selector de CSS puro, luego use .filter(":visible").

Además, si le preocupa el rendimiento, debe verificar Ahora me ves ... mostrar / ocultar el rendimiento (2010-05-04). Y use otros métodos para mostrar y ocultar elementos.


187
2017-11-25 09:16



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   */
}

169
2017-07-06 20:19



Cómo visibilidad de los elementos y jQuery funciona;

Un elemento podría estar oculto con display:none, visibility:hidden o opacity:0. La diferencia entre esos métodos:

  • display:none oculta el elemento y no ocupa espacio;
  • visibility:hidden oculta el elemento, pero aún ocupa espacio en el diseño;
  • opacity:0 oculta el elemento como "visibilidad: oculto", y aún ocupa espacio en el diseño; la única diferencia es que la opacidad le permite a uno hacer que un elemento sea parcialmente transparente;

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }
    

    Métodos de alternancia jQuery útiles: 

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    

165
2018-04-24 21:04



Yo usaría la clase CSS .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 .toggle() o .animate() métodos.


133
2018-02-03 16:04