Vraag Hoe controleer ik of een element is verborgen in jQuery?


Het is mogelijk om de zichtbaarheid van een element in te stellen met behulp van de functies .hide(), .show() of .toggle().

Hoe zou je testen of een element zichtbaar of verborgen is?


6694
2017-10-07 13:03


oorsprong


antwoorden:


Aangezien de vraag naar een enkel element verwijst, kan deze code geschikter zijn:

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

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

Hetzelfde als de suggestie van twernt, maar toegepast op een enkel element; en het komt overeen met het algoritme dat wordt aanbevolen in de jQuery-veelgestelde vraag


8283
2017-10-07 13:30



U kunt de hidden selector:

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

En de visible selector:

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

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

Bijvoorbeeld,

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

De bovenstaande methode zal overwegen div2 zichtbaar terwijl :visible niet. Maar het bovenstaande kan in veel gevallen nuttig zijn, vooral als je moet weten of er foutafwijkingen zichtbaar zijn in het verborgen bovenliggende element, omdat in dergelijke omstandigheden :visible zal niet werken.


783
2017-10-07 13:09



Geen van deze antwoorden gaat in op wat ik versta als de vraag, waarnaar ik op zoek was, "Hoe ga ik om met items die dat wel hebben visibility: hidden?". Geen van beide :visible noch :hidden zal dit behandelen, omdat ze allebei op zoek zijn naar weergave volgens de documentatie. Voor zover ik kon bepalen, is er geen selector om CSS-zichtbaarheid af te handelen. Hier is hoe ik het opgelost (standaard jQuery selectors, er kan een meer gecomprimeerde syntaxis zijn):

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

450
2018-03-24 18:44



Van Hoe bepaal ik de status van een omgewisseld element?


U kunt bepalen of een element is samengevouwen of niet door het te gebruiken :visible en :hidden selectors.

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

Als u eenvoudigweg handelt op een element dat is gebaseerd op de zichtbaarheid, kunt u het gewoon opnemen :visible of :hidden in de selectorexpressie. Bijvoorbeeld:

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

321
2018-01-13 21:13



Vaak ga je direct na het controleren of iets zichtbaar is of niet, meteen iets anders doen. jQuery chaining maakt dit gemakkelijk.

Dus als u een selector heeft en u wilt er alleen wat actie op uitvoeren als deze zichtbaar of verborgen is, kunt u gebruiken filter(":visible") of filter(":hidden") gevolgd door het te ketenen met de actie die u wilt ondernemen.

Dus in plaats van een if verklaring, zoals deze:

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 op één regel doen:

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

235
2017-07-25 10:21



De :visible selector volgens de jQuery-documentatie:

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

Elementen met visibility: hidden of opacity: 0 worden beschouwd als zichtbaar, omdat ze nog steeds ruimte in de lay-out gebruiken.

Dit is in sommige gevallen nuttig en nutteloos in andere, omdat als u wilt controleren of het element zichtbaar is (display != none), terwijl je de zichtbaarheid van de ouders negeert, zul je dat merken .css("display") == 'none' is niet alleen sneller, maar retourneert ook de zichtbaarheidscheck correct.

Als u de zichtbaarheid in plaats van weergave wilt controleren, moet u het volgende gebruiken: .css("visibility") == "hidden".

Houd ook rekening met de extra jQuery-notities:

Omdat :visible is een jQuery-extensie en maakt geen deel uit van de CSS-specificatie, waarbij query's worden gebruikt :visible kan geen gebruik maken van de prestatieverbetering van de native DOM querySelectorAll() methode. Om de beste prestaties te bereiken tijdens het gebruik :visible 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 dit ook controleren Nu zie je me ... prestaties tonen / verbergen (2010-05-04). En gebruik andere methoden om elementen te tonen en te verbergen.


187
2017-11-25 09:16