Question Comment vérifier si un élément est caché dans jQuery?


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é?


6694
2017-10-07 13:03


origine


Réponses:


Puisque la question fait référence à un seul élément, ce code pourrait être plus approprié:

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

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

Pareil que La suggestion de twernt, mais appliqué à un seul élément; et cela correspond à l'algorithme recommandé dans la FAQ jQuery


8283
2017-10-07 13:30



Vous pouvez utiliser le hidden sélecteur:

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

Et le visible sélecteur:

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

La méthode ci-dessus ne tient pas compte de la visibilité du parent. Pour considérer le parent aussi, vous devriez utiliser .is(":hidden") ou .is(":visible").

Par exemple,

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

La méthode ci-dessus considérera div2 visible tout en :visible ne pas. Mais ce qui précède pourrait être utile dans de nombreux cas, en particulier lorsque vous avez besoin de trouver s'il y a des divs d'erreur visibles dans le parent caché parce que dans de telles conditions :visible ne fonctionnera pas.


783
2017-10-07 13:09



Aucune de ces réponses ne répond à ce que je comprends être la question, ce que je cherchais, "Comment puis-je gérer les éléments qui ont visibility: hidden? ". Ni :visible ni :hidden va gérer cela, car ils sont à la recherche d'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
    }
});

450
2018-03-24 18:44



De Comment déterminer l'état d'un élément basculé?


Vous pouvez déterminer si un élément est réduit ou non en utilisant le :visible et :hidden sélecteurs.

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

Si vous agissez simplement sur un élément en fonction de sa visibilité, vous pouvez simplement inclure :visible ou :hidden dans l'expression du sélecteur. Par exemple:

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

321
2018-01-13 21:13



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 dessus seulement si c'est visible ou caché, vous pouvez utiliser filter(":visible") ou filter(":hidden") suivi de l'enchaîner avec l'action que vous voulez prendre.

Donc, au lieu d'un if déclaration, 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" });

235
2017-07-25 10:21



le :visible sélecteur selon la documentation de jQuery:

  • Ils ont un CSS display valeur de none.
  • Ce sont des éléments de forme avec type="hidden".
  • Leur largeur et leur hauteur sont explicitement définies à 0.
  • Un élément ancêtre est masqué, l'élément n'apparaît donc pas sur la page.

Éléments avec visibility: hidden ou opacity: 0 sont considérés comme visibles, car ils consomment encore de l'espace dans la mise en page.

Ceci est utile dans certains cas et inutile dans d'autres, car si vous voulez vérifier si l'élément est visible (display != none), en ignorant la visibilité des parents, vous trouverez que faire .css("display") == 'none' est non seulement plus rapide, mais renvoie également le contrôle de visibilité correctement.

Si vous voulez vérifier la visibilité au lieu de l'affichage, vous devez utiliser: .css("visibility") == "hidden".

Prendre également en considération les notes supplémentaires de jQuery:

Car :visible est une extension jQuery et ne fait pas partie de la spécification CSS, les requêtes utilisant :visible ne peut pas profiter de l'amélioration des performances fournies par le DOM natif querySelectorAll() méthode. Pour obtenir les meilleures performances lors de l'utilisation :visible Pour sélectionner des éléments, sélectionnez d'abord les éléments en utilisant un sélecteur CSS pur, puis utilisez .filter(":visible").

En outre, si vous êtes préoccupé par la performance, vous devriez vérifier Maintenant vous me voyez ... afficher / masquer les performances (2010-05-04). Et utilisez d'autres méthodes pour afficher et masquer les éléments.


187
2017-11-25 09:16



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

169
2017-07-06 20:19



Comment la visibilité des éléments et les travaux de jQuery;

Un élément pourrait être caché avec display:none, visibility:hidden ou opacity:0. La différence entre ces méthodes:

  • display:none cache l'élément et ne prend aucun espace;
  • visibility:hidden cache l'élément, mais il occupe toujours de l'espace dans la mise en page;
  • opacity:0 cache l'élément en tant que "visibility: hidden", et occupe toujours de l'espace dans la mise en page; la seule différence est que l'opacité permet de rendre un élément partiellement transparent;

    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éthodes de bascule jQuery utiles: 

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

165
2018-04-24 21:04