[Javascript] Comment vérifier si un élément est caché dans jQuery?


Answers

Vous pouvez utiliser le sélecteur hidden :

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

Et le sélecteur visible :

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

Il est possible de basculer la visibilité d'un élément, en utilisant les fonctions .hide() , .show() ou .toggle() .

Comment testeriez-vous si un élément est visible ou caché?




ebdiv devrait être mis à style="display:none;" . C'est un travail pour montrer et cacher:

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



Voici également une expression conditionnelle ternaire pour vérifier l'état de l'élément puis le basculer:

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



Aucune de ces réponses ne répond à ce que je comprends être la question, qui est ce que je cherchais, "Comment puis-je gérer les éléments qui ont de la visibility: hidden ?" . Ni :visible ni :hidden gérera ceci, car ils recherchent tous les deux l'affichage par la documentation. Autant que je puisse déterminer, il n'y a pas de sélecteur pour gérer la visibilité CSS. Voici comment je l'ai résolu (sélecteurs jQuery standard, il peut y avoir une syntaxe plus condensée):

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



Cela fonctionne pour moi, et j'utilise show() et hide() pour rendre ma div cachée / visible:

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



Une fonction peut être créée pour vérifier les attributs de visibilité / affichage afin de déterminer si l'élément est affiché ou non dans l'interface utilisateur.

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

Violon de travail




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



Pour vérifier si elle n'est pas visible j'utilise ! :

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

Ou le suivant est aussi le sam, en sauvant le sélecteur jQuery dans une variable pour avoir de meilleures performances lorsque vous en avez besoin plusieurs fois:

var $book = $('#book')

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



Peut-être que vous pouvez faire quelque chose comme ça

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




Après tout, aucun exemple ne me convient, alors j'ai écrit le mien.

Tests (pas de support du filter:alpha Internet Explorer filter:alpha ):

a) Vérifie si le document n'est pas caché

b) Vérifier si un élément a zéro largeur / hauteur / opacité ou display:none / visibility:hidden dans les styles en ligne

c) Vérifie si le centre (aussi parce qu'il est plus rapide que de tester chaque pixel / coin) de l'élément n'est pas caché par un autre élément (et tous les ancêtres, exemple: overflow:hidden / défilement / un élément sur enother) ou bords de l'écran

d) Vérifier si un élément a zéro largeur / hauteur / opacité ou display:none / visibilité: caché dans les styles calculés (parmi tous les ancêtres)

Testé sur

Android 4.4 (navigateur natif / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac), Internet Explorer (modes de document Internet Explorer 5-11 + Internet Explorer 8 sur machine virtuelle), 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;
    }
})();

Comment utiliser:

is_visible(elem) // boolean



J'utiliserais la classe CSS .hide { display: none!important; } .hide { display: none!important; }

Pour masquer / montrer, j'appelle .addClass("hide")/.removeClass("hide") . Pour vérifier la visibilité, j'utilise .hasClass("hide") .

C'est un moyen simple et clair de vérifier / cacher / afficher les éléments, si vous ne prévoyez pas d'utiliser les .toggle() ou .animate() .




On peut simplement utiliser l'attribut hidden ou visible , comme:

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

Ou vous pouvez simplifier la même chose avec est comme suit.

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



Lors du test d'un élément par rapport à :hidden sélecteur :hidden dans jQuery, il faut considérer qu'un élément positionné en absolu peut être reconnu comme caché bien que ses éléments fils soient visibles .

Cela semble quelque peu contre-intuitif en premier lieu - bien que regarder de plus près la documentation de jQuery donne les informations pertinentes:

Les éléments peuvent être considérés comme cachés pour plusieurs raisons: [...] Leur largeur et leur hauteur sont explicitement mises à 0. [...]

Donc, cela a du sens en ce qui concerne le modèle de boîte et le style calculé pour l'élément. Même si largeur et hauteur ne sont pas définies explicitement à 0, elles peuvent être définies implicitement .

Jetez un oeil à l'exemple suivant:

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>

MISE À JOUR POUR JQUERY 3.x:

Avec jQuery 3, le comportement décrit va changer! Les éléments seront considérés comme visibles s'ils ont des boîtes de mise en page, y compris celles de largeur et / ou de hauteur nulles.

JSFiddle avec jQuery 3.0.0-alpha1:

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

Le même JS aura alors cette sortie:

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



Utilisez la bascule de classe, pas l'édition de style. . .

Utiliser des classes désignées pour "cacher" des éléments est facile et aussi l'une des méthodes les plus efficaces. Basculer une classe "cachée" avec un style d' Display "none" sera plus rapide que l'édition directe de ce style. J'en ai expliqué une partie à fond dans question Turning deux éléments visibles / cachés dans la même div .

Meilleures pratiques JavaScript et optimisation

Voici une vidéo vraiment révélatrice d'un ingénieur de Google Tech Talk par Google, Nicholas Zakas:




Souvent, lorsque vous vérifiez si quelque chose est visible ou non, vous allez immédiatement aller de l'avant et faire autre chose avec. Le chaînage jQuery rend cela facile.

Donc, si vous avez un sélecteur et que vous voulez effectuer une action uniquement si elle est visible ou cachée, vous pouvez utiliser filter(":visible") ou filter(":hidden") suivi de l'enchaîner avec l'action que vous voulez prendre.

Donc, au lieu d'une instruction if , comme ceci:

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

Ou plus efficace, mais encore plus laide:

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

Vous pouvez tout faire en une ligne:

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



Links