javascript visivel esta - Como faço para verificar se um elemento está oculto no jQuery?

Nenhuma dessas respostas aborda o que eu entendo ser a pergunta, que é o que eu estava procurando: "Como lidar com itens que têm visibility: hidden ?" . Nem :visible nem :hidden lidará com isso, pois ambos estão procurando exibição de acordo com a documentação. Tanto quanto eu poderia determinar, não há seletor para lidar com visibilidade de CSS. Aqui está como eu resolvi isso (seletores padrão do jQuery, pode haver uma sintaxe mais condensada):

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

Muitas vezes, ao verificar se algo está visível ou não, você vai imediatamente à frente e faz outra coisa com ele. O encadeamento do jQuery facilita isso.

Portanto, se você tiver um seletor e quiser executar alguma ação nele apenas se estiver visível ou oculto, use filter(":visible") ou filter(":hidden") seguido de encadeamento com a ação que deseja leva.

Então, ao invés de uma declaração if , assim:

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

Ou mais eficiente, mas ainda mais feia:

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

Você pode fazer tudo em uma linha:

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

Isso funciona para mim e estou usando show() e hide() para tornar meu div oculto / visível:

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

Eu usaria a classe CSS .hide { display: none!important; } .hide { display: none!important; } .

Para esconder / mostrar, eu chamo .addClass("hide")/.removeClass("hide") . Para verificar a visibilidade, eu uso .hasClass("hide") .

É uma maneira simples e clara de verificar / ocultar / mostrar elementos, se você não planeja usar os .toggle() ou .animate() .

Pode-se simplesmente usar o atributo hidden ou visible , como:

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

Ou você pode simplificar o mesmo com o seguinte.

$(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="" />

Fonte:

Plug and Play do Blogger - ferramentas e widgets do jQuery: como ver se o elemento está oculto ou visível usando jQuery

jsFiddle:

JSFiddle - ipsjolly - k4WWj

Ao testar um elemento em :hidden seletor :hidden em jQuery, deve-se considerar que um elemento de posição absoluta pode ser reconhecido como oculto, embora seus elementos filhos estejam visíveis .

Isso parece um pouco contra-intuitivo em primeiro lugar - embora ter um olhar mais atento à documentação do jQuery forneça as informações relevantes:

Os elementos podem ser considerados ocultos por vários motivos: [...] Sua largura e altura são explicitamente definidas como 0. [...]

Então isso realmente faz sentido no que diz respeito ao modelo de caixa e ao estilo computado para o elemento. Mesmo que largura e altura não sejam definidas explicitamente como 0, elas podem ser configuradas implicitamente .

Dê uma olhada no seguinte exemplo:

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>

ATUALIZAÇÃO PARA O JQUERY 3.x:

Com o jQuery 3, o comportamento descrito irá mudar! Os elementos serão considerados visíveis se tiverem caixas de layout, incluindo as de largura e / ou altura zero.

JSFiddle com jQuery 3.0.0-alpha1:

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

O mesmo JS terá então esta saída:

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

Exemplo:

$(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 a alternância de classes, não a edição de estilo. . .

Usando classes designadas para elementos "escondidos" é fácil e também um dos métodos mais eficientes. Alternar uma classe 'hidden' com um estilo de Display 'none' será mais rápido do que editar esse estilo diretamente. Expliquei um pouco disso bastante na questão do . Tornando dois elementos visíveis / ocultos na mesma div .

Melhores Práticas e Otimização de JavaScript

Aqui está um vídeo verdadeiramente esclarecedor de um engenheiro de front-end do Google Tech Talk do Google, Nicholas Zakas:

• Acelere seu Javascript (YouTube)

Exemplo de uso da verificação visível para o adblocker é ativado:

$(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" é um ID que bloqueia o adblocker. Portanto, se for verificado, você poderá detectar se o adblocker está ativado.

Talvez você possa fazer algo assim

$(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());
}

Basta verificar a visibilidade, verificando um valor booleano, como:

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

Eu usei esse código para cada função. Caso contrário, você pode usar is(':visible') para verificar a visibilidade de um elemento.

Também aqui está uma expressão condicional ternária para verificar o estado do elemento e depois alterná-lo:

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