javascript saber esta - ¿Cómo compruebo si un elemento está oculto en jQuery?



15 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')
is visible como

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

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




Ninguna de estas respuestas aborda lo que entiendo que es la pregunta, que es lo que buscaba, "¿Cómo manejo los elementos que tienen visibility: hidden ?" . Ni :visible ni :hidden manejarán esto, ya que ambos buscan visualización según la documentación. Por lo que pude determinar, no hay ningún selector para manejar la visibilidad de CSS. Aquí es cómo 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
    }
});



A menudo, al verificar si algo está visible o no, vas a seguir adelante de inmediato y harás otra cosa con él. El encadenamiento jQuery lo hace fácil.

Por lo tanto, si tiene un selector y desea realizar alguna acción en él solo si está visible u oculto, puede usar el filter(":visible") o el filter(":hidden") seguido de un encadenamiento con la acción que desea tomar.

Así que en lugar de una declaración if , 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 línea:

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



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

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



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

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

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




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

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

O puede simplificar lo mismo con lo siguiente.

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



$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

Fuente:

Blogger Plug n Play - Herramientas y widgets de jQuery: cómo ver si el elemento está oculto o visible usando jQuery

jsFiddle:

JSFiddle - ipsjolly - k4WWj




Al probar un elemento con :hidden selector :hidden en jQuery, debe considerarse que un elemento posicionado absoluto puede reconocerse como oculto aunque sus elementos secundarios estén visibles .

Esto parece algo contraintuitivo en primer lugar, aunque al observar 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 se establecen explícitamente en 0. [...]

Así que esto realmente tiene sentido en relación con el modelo de caja y el estilo computado para el elemento. Incluso si el ancho y el alto no están establecidos 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á entonces esta salida:

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



Ejemplo:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>




Use la alternancia de clases, no la edición de estilos. . .

Usar clases designadas para "ocultar" elementos es fácil y también es uno de los métodos más eficientes. La alternancia de una clase "oculta" con un estilo de Display de "ninguno" tendrá un rendimiento más rápido que la edición de ese estilo directamente. Expliqué algo de esto bastante a fondo en la pregunta de desbordamiento de pila. Volviendo dos elementos visibles / ocultos en la misma división .

Mejores Prácticas y Optimización de JavaScript

Aquí hay un video realmente esclarecedor de un ingeniero de front-end de Google Tech Talk por Google Nicholas Zakas:




Se activa el ejemplo de uso del cheque visible para adblocker:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" es una ID que bloquea adblocker. Por lo tanto, si está visible, podrá verificar si el bloqueador de anuncios está activado.




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>




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



Simplemente verifique la visibilidad buscando un valor booleano, como:

if (this.hidden === false) {
    // Your code
}

Utilicé este código para cada función. De lo contrario, puede usar is(':visible') para verificar la visibilidad de un elemento.




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



Related