javascript savoir element - Comment vérifier si un élément est caché dans jQuery?





15 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')
visible on screen

Il est possible de basculer la visibilité d'un élément à l'aide des fonctions .hide() , .show() ou .toggle() .

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




Aucune de ces réponses n'aborde ce que je comprends être la question, c'est-à-dire ce que je cherchais: "Comment gérer les éléments qui ont une visibility: hidden ?" . Ni :visible ni :hidden ne gèreront cela, car ils recherchent tous les deux l'affichage selon la documentation. Autant que je sache, il n'y a pas de sélecteur pour gérer la visibilité CSS. Voici comment j'ai résolu le problème (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
    }
});



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 cela. Le chaînage jQuery facilite les choses.

Donc, si vous avez un sélecteur et que vous souhaitez effectuer une action sur celui-ci uniquement s'il est visible ou masqué, vous pouvez utiliser le filter(":visible") ou le filter(":hidden") suivi de l'enchaînement avec l'action souhaitée. prendre.

Donc au lieu d’une déclaration if , comme ceci:

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

Ou plus efficace, mais encore plus laid:

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

Vous pouvez tout faire en une seule ligne:

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



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



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

Pour masquer / afficher, 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 / masquer / 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")



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

La source:

Blogger Plug n Play - Outils et widgets jQuery: Comment savoir si un élément est masqué ou visible à l'aide de jQuery

jsFiddle:

JSFiddle - ipsjolly - k4WWj




Lors du test d'un élément contre :hidden sélecteur :hidden dans jQuery, il convient de considérer qu'un élément positionné en absolu peut être reconnu comme étant masqué, bien que ses éléments enfants soient visibles .

Cela semble un 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 masqués pour plusieurs raisons: [...] Leurs largeur et hauteur sont explicitement définies sur 0. [...]

Cela a donc 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 explicitement définies sur 0, elles peuvent être définies de manière implicite .

Regardez 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 zones de mise en page, y compris celles de largeur et / ou hauteur zéro.

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



Exemple:

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




Utilisez la commutation de classe, pas la modification de style. . .

L'utilisation de classes désignées pour "masquer" des éléments est simple et constitue l'une des méthodes les plus efficaces. Le fait de basculer une classe "masquée" avec un style d' Display de "néant" fonctionnera plus rapidement que de le modifier directement. J'ai expliqué en détail certaines de ces difficultés dans la question Débordement de pile Tournant deux éléments visibles / cachés dans le même div .

Meilleures pratiques et optimisation JavaScript

Voici une vidéo vraiment enrichissante d'un Google Tech Talk de Nicholas Zakas, ingénieur front-end de Google:




Exemple d'utilisation du contrôle visible pour adblocker activé:

$(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" est un identifiant bloqué par adblocker. En vérifiant si elle est visible, vous êtes en mesure de détecter si adblocker est activé.




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>




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



Vérifiez simplement la visibilité en recherchant une valeur booléenne, telle que:

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

J'ai utilisé ce code pour chaque fonction. Sinon, vous pouvez utiliser is(':visible') pour vérifier la visibilité d'un élément.




Voici également une expression conditionnelle ternaire permettant de vérifier l'état de l'élément, puis de l'activer:

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





Related