Hoe controleer ik of een element verborgen is in jQuery?

Is het mogelijk om de zichtbaarheid van een element te wijzigen met behulp van de functies .hide(), .show()of .toggle()?

Hoe zou je testen of een element visibleof hiddenis?


Antwoord 1, autoriteit 100%

Aangezien de vraag betrekking heeft op een enkel element, is deze code wellicht geschikter:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");

Het is hetzelfde als twernt’s suggestie, maar toegepast op een enkel element; en het komt overeen met het aanbevolen algoritme in de jQuery FAQ.

We gebruiken jQuery’s is()om het geselecteerde element te controleren met een ander element, selector of een jQuery-object. Deze methode doorloopt de DOM-elementen om een overeenkomst te vinden die voldoet aan de doorgegeven parameter. Het zal true retourneren als er een overeenkomst is, anders false.


Antwoord 2, autoriteit 16%

Je kunt de hidden-selector gebruiken:

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

En de visibleselector:

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

Antwoord 3, autoriteit 10%

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

De bovenstaande methode houdt geen rekening met de zichtbaarheid van de ouder. Om ook de ouder te beschouwen, moet u .is(":hidden")of .is(":visible")gebruiken.

Bijvoorbeeld

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

De bovenstaande methode beschouwt div2als zichtbaar, terwijl :visibleniet. Maar het bovenstaande kan in veel gevallen nuttig zijn, vooral wanneer u moet zoeken of er fouten zichtbaar zijn in de verborgen ouder, omdat in dergelijke omstandigheden :visibleniet zal werken.


Antwoord 4, autoriteit 6%

Geen van deze antwoorden gaat in op wat volgens mij de vraag is, waarnaar ik op zoek was, “Hoe ga ik om met items die visibility: hiddenhebben?”. Noch :visiblenoch :hiddenkan dit aan, aangezien ze beide zoeken naar weergave volgens de documentatie. Voor zover ik kon bepalen, is er geen selector om CSS-zichtbaarheid te verwerken. Hier is hoe ik het heb opgelost (standaard jQuery-selectors, er kan een meer beknopte syntaxis zijn):

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

Antwoord 5, autoriteit 4%

Van Hoe bepaal ik de status van een omgeschakeld element?


Je kunt bepalen of een element is samengevouwen of niet door de :visibleen :hiddenselectors te gebruiken.

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

Als je gewoon handelt naar een element op basis van zijn zichtbaarheid, kun je gewoon :visibleof :hiddenopnemen in de selector-expressie. Bijvoorbeeld:

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

Antwoord 6, autoriteit 3%

Vaak ga je bij het controleren of iets zichtbaar is of niet, meteen door en ga je er iets anders mee doen. jQuery-ketens maken dit gemakkelijk.

Dus als je een selector hebt en je wilt er alleen een actie op uitvoeren als deze zichtbaar of verborgen is, kun je filter(":visible")of filter(":hidden")gevolgd door deze te koppelen aan de actie die u wilt ondernemen.

Dus in plaats van een if-statement, zoals dit:

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

Of efficiënter, maar nog lelijker:

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

Je kunt het allemaal in één regel doen:

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

Antwoord 7, autoriteit 3%

De :visibleselector volgens de jQuery-documentatie:

  • Ze hebben een CSS displaywaarde van none.
  • Het zijn formulierelementen met type="hidden".
  • Hun breedte en hoogte zijn expliciet ingesteld op 0.
  • Een voorouderelement is verborgen, dus het element wordt niet weergegeven op de pagina.

Elementen met visibility: hiddenof opacity: 0worden als zichtbaar beschouwd, aangezien ze nog steeds ruimte innemen in de lay-out.

Dit is in sommige gevallen handig en in andere nutteloos, want als je wilt controleren of het element zichtbaar is (display != none), waarbij je de zichtbaarheid van de ouders negeert, zul je merken dat .css("display") == 'none'is niet alleen sneller, maar geeft ook de zichtbaarheidscontrole correct terug.

Als je de zichtbaarheid wilt controleren in plaats van de weergave, gebruik dan: .css("visibility") == "hidden".

Houd ook rekening met de aanvullende jQuery-opmerkingen:

Omdat :visibleeen jQuery-extensie is en geen deel uitmaakt van de CSS-specificatie, kunnen query’s met :visibleniet profiteren van de prestatieverbetering die wordt geboden door de native DOM querySelectorAll()methode. Om de beste prestaties te bereiken wanneer u :visiblegebruikt om elementen te selecteren, selecteert u eerst de elementen met een pure CSS-selector en gebruikt u vervolgens .filter(":visible").

Als u zich zorgen maakt over de prestaties, moet u ook Nu zie je me… show/hide performance(2010-05-04). En gebruik andere methoden om elementen te tonen en te verbergen.


Antwoord 8, autoriteit 2%

Hoe zichtbaarheid van elementen en jQuery werken;

Een element kan worden verborgen met display:none, visibility:hiddenof opacity:0. Het verschil tussen deze methoden:

  • display:noneverbergt het element en het neemt geen ruimte in beslag;
  • visibility:hiddenverbergt het element, maar neemt nog steeds ruimte in beslag in de lay-out;
  • opacity:0verbergt het element als “visibility:hidden”, en het neemt nog steeds ruimte in beslag in de lay-out; het enige verschil is dat de dekking het mogelijk maakt om een element gedeeltelijk transparant te maken;

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

    Handige jQuery-wisselmethoden:

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

Antwoord 9, autoriteit 2%

Dit werkt voor mij, en ik gebruik show()en hide()om mijn div verborgen/zichtbaar te maken:

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

Antwoord 10, autoriteit 2%

U kunt dit ook doen met gewoon JavaScript:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

Opmerkingen:

  1. Werkt overal

  2. Werkt voor geneste elementen

  3. Werkt voor CSS en inline-stijlen

  4. Vereist geen raamwerk


Antwoord 11, autoriteit 2%

Ik zou CSS-klasse .hide { display: none!important; }.

Voor verbergen/weergeven noem ik .addClass("hide")/.removeClass("hide"). Voor het controleren van de zichtbaarheid gebruik ik .hasClass("hide").

Het is een eenvoudige en duidelijke manier om elementen te controleren/verbergen/weergeven, als u niet van plan bent om de methoden .toggle()of .animate()te gebruiken.


Antwoord 12

Je kunt eenvoudig het kenmerk hiddenof visiblegebruiken, zoals:

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

Of je kunt hetzelfde vereenvoudigen met isals volgt.

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

Antwoord 13

ebdivmoet worden ingesteld op style="display:none;". Het werkt voor zowel tonen als verbergen:

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

Antwoord 14

Een ander antwoord waarmee u rekening moet houden, is dat als u een element verbergt, u jQuery, maar in plaats van het daadwerkelijk te verbergen, verwijder je het hele element, maar kopieer je de HTMLinhoud en de tag zelf in een jQuery-variabele, en dan hoef je alleen maar te testen of er zo’n tag op het scherm staat, met behulp van de normale if (!$('#thetagname').length).


Antwoord 15

Bij het testen van een element tegen :hiddenselector in jQuery moet er rekening mee worden gehouden dat een absoluut gepositioneerd element kan worden herkend als verborgen hoewel hun onderliggende elementen zichtbaar zijn.

Dit lijkt in de eerste plaats enigszins contra-intuïtief, hoewel een nadere blik op de jQuery-documentatie de relevante informatie geeft:

Elementen kunnen om verschillende redenen als verborgen worden beschouwd: […] Hun breedte en hoogte zijn expliciet ingesteld op 0. […]

Dus dit is eigenlijk logisch met betrekking tot het doosmodel en de berekende stijl voor het element. Zelfs als breedte en hoogte niet explicietzijn ingesteld op 0, kunnen ze implicietworden ingesteld.

Bekijk het volgende voorbeeld:

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>

Antwoord 16

Dit kan werken:

expect($("#message_div").css("display")).toBe("none");

Antwoord 17

Voorbeeld:

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

Antwoord 18

Om te controleren of het niet zichtbaar is, gebruik ik !:

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

Of het volgende is ook hetzelfde, waarbij de jQuery-selector in een variabele wordt opgeslagen voor betere prestaties wanneer u deze meerdere keren nodig hebt:

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

Antwoord 19

Gebruik het wisselen van klassen, niet het bewerken van stijlen. . .

Het gebruik van klassen die zijn aangewezen voor het “verbergen” van elementen is eenvoudig en ook een van de meest efficiënte methoden. Het omschakelen van een klasse ‘verborgen’ met een Display-stijl van ‘none’ zal sneller werken dan die stijl rechtstreeks te bewerken. Ik heb een deel hiervan behoorlijk grondig uitgelegd in Stack Overflow-vraag Twee elementen zichtbaar/verborgen in dezelfde div.


Beste praktijken en optimalisatie van JavaScript

Hier is een zeer verhelderende video van een Google Tech Talk door Google front-end engineer Nicholas Zakas:


Antwoord 20

Voorbeeld van het gebruik van de zichtbarecontrole voor adblocker is geactiveerd:

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

Antwoord 21

Tenslotte past geen van de voorbeelden bij mij, dus schreef ik mijn eigen.

Tests(geen ondersteuning voor Internet Explorer filter:alpha):

a) Controleer of het document niet verborgen is

b) Controleer of een element nul breedte / hoogte / dekking heeft of display:none/ visibility:hiddenin inline stijlen

c) Controleer of het midden (ook omdat het sneller is dan het testen van elke pixel / hoek) van het element niet wordt verborgen door een ander element (en alle voorouders, bijvoorbeeld: overflow:hidden/ scroll / het ene element over het andere) of schermranden

d) Controleer of een element nul breedte / hoogte / dekking heeft of display:none/ zichtbaarheid:verborgen in berekende stijlen (tussen alle voorouders)

Getest op

Android 4.4 (native browser/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto/Mac WebKit), Internet Explorer (Internet Explorer 5-11 documentmodi + Internet Explorer 8 op een virtuele machine) en 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;
    }
})();

Hoe te gebruiken:

is_visible(elem) // boolean

Antwoord 22

U moet zowel … weergeven en zichtbaar:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

Als we controleren op $(this).is(":visible"), jQuery controleert op beide dingen automatisch.


23

Misschien kun je zoiets doen

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

24

Controleer eenvoudigweg het zicht door te controleren op een Booleaanse waarde, zoals:

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

Ik heb deze code voor elke functie gebruikt. Anders kunt u is(':visible')voor het controleren van de zichtbaarheid van een element.


25

Omdat Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(zoals beschreven voor JQuery: zichtbare selector ) – We kunnen controleren of element echt op deze manier zichtbaar is:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}
var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});

26

Maar wat als de CSS van het element is als het volgende?

.element{
    position: absolute;left:-9999;    
}

dus Dit antwoord op stapeloverloopvraag Hoe te controleren of een element off-screen is ook worden overwogen.


27

Er kan een functie worden gemaakt om te controleren op zichtbaarheid / display-kenmerken om te peilen of het element in de UI wordt getoond of niet.

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

werkende viool


28

Ook hier is een ternaire voorwaardelijke uitdrukking om de status van het element te controleren en vervolgens om het te schakelen:

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

29

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

Other episodes