[javascript] Como faço para verificar se um elemento está oculto no jQuery?


14 Answers

Você pode usar o seletor hidden :

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

E o seletor visible :

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

É possível alternar a visibilidade de um elemento, usando as funções .hide() , .show() ou .toggle() .

Como você testaria se um elemento é visível ou oculto?




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



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



Exemplo:

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

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




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>




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:




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



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

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

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




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

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;
    }
})();
is_visible(elem) // boolean

"ablockercheck" é um ID que bloqueia o adblocker. Portanto, se for verificado, você poderá detectar se o adblocker está ativado.




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



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() .




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



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



$('#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




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



Related