Frage Wie überprüfe ich, ob ein Element in jQuery versteckt ist?


Mit den Funktionen kann die Sichtbarkeit eines Elements umgeschaltet werden .hide(), .show() oder .toggle().

Wie testen Sie, ob ein Element sichtbar oder versteckt ist?


6694
2017-10-07 13:03


Ursprung


Antworten:


Da sich die Frage auf ein einzelnes Element bezieht, könnte dieser Code geeigneter sein:

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

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

Gleich wie Twerts Vorschlag, aber auf ein einzelnes Element angewendet; und es entspricht dem in den jQuery-FAQ empfohlenen Algorithmus


8283
2017-10-07 13:30



Du kannst den ... benutzen hidden Wähler:

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

Und das visible Wähler:

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

Die obige Methode berücksichtigt nicht die Sichtbarkeit des übergeordneten Elements. Um auch die Eltern zu berücksichtigen, sollten Sie verwenden .is(":hidden") oder .is(":visible").

Beispielsweise,

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

Die obige Methode wird berücksichtigt div2 sichtbar während :visible nicht. Aber das obige kann in vielen Fällen nützlich sein, besonders wenn Sie herausfinden müssen, ob in diesem verborgenen Elternteil Fehlerdivs sichtbar sind :visible wird nicht funktionieren.


783
2017-10-07 13:09



Keine dieser Antworten adressiert das, was ich als die Frage verstehe, nach der ich gesucht habe, "Wie gehe ich mit Gegenständen um, die visibility: hidden". Weder :visible Noch :hidden werden damit umgehen, da beide nach der Dokumentation in der Dokumentation suchen. Soweit ich feststellen konnte, gibt es keinen Selektor für die Sichtbarkeit von CSS. Hier ist, wie ich es gelöst habe (Standard jQuery Selektoren, kann es eine mehr kondensierte Syntax sein):

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

450
2018-03-24 18:44



Von Wie ermittle ich den Status eines getoggten Elements?


Sie können bestimmen, ob ein Element ausgeblendet ist oder nicht :visible und :hidden Selektoren.

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

Wenn Sie basierend auf der Sichtbarkeit nur auf einem Element agieren, können Sie es einfach einbeziehen :visible oder :hidden im Selektorausdruck. Beispielsweise:

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

321
2018-01-13 21:13



Wenn Sie prüfen, ob etwas sichtbar ist oder nicht, werden Sie sofort sofort loslegen und etwas anderes damit machen. jQuery-Verkettung macht das einfach.

Wenn Sie also einen Selektor haben und nur dann eine Aktion ausführen möchten, wenn er sichtbar oder verborgen ist, können Sie ihn verwenden filter(":visible") oder filter(":hidden") gefolgt von Verkettung mit der Aktion, die Sie ergreifen möchten.

Also statt eines if Aussage, wie folgt:

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

Oder effizienter, aber noch hässlicher:

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

Sie können alles in einer Zeile machen:

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

235
2017-07-25 10:21



Das :visible Wahlschalter nach die jQuery-Dokumentation:

  • Sie haben ein CSS display Wert von none.
  • Sie sind Formelemente mit type="hidden".
  • Ihre Breite und Höhe sind explizit auf 0 festgelegt.
  • Ein Vorfahrelement ist ausgeblendet, daher wird das Element nicht auf der Seite angezeigt.

Elemente mit visibility: hidden oder opacity: 0 werden als sichtbar angesehen, da sie immer noch Platz im Layout verbrauchen.

Dies ist in einigen Fällen nützlich und in anderen nutzlos, weil Sie überprüfen möchten, ob das Element sichtbar ist (display != none), die Sichtbarkeit der Eltern ignorierend, werden Sie das tun finden .css("display") == 'none' ist nicht nur schneller, sondern gibt auch die Sichtbarkeitsprüfung korrekt zurück.

Wenn Sie die Sichtbarkeit anstatt der Anzeige überprüfen möchten, sollten Sie Folgendes verwenden: .css("visibility") == "hidden".

Berücksichtigen Sie auch die zusätzlichen jQuery-Notizen:

weil :visible ist eine jQuery-Erweiterung und nicht Teil der CSS-Spezifikation, Abfragen mit :visible kann den Leistungsschub des nativen DOM nicht nutzen querySelectorAll() Methode. Um die beste Leistung bei der Verwendung zu erzielen :visible Um Elemente auszuwählen, wählen Sie zunächst die Elemente mit einem reinen CSS-Selektor aus und verwenden Sie dann .filter(":visible").

Wenn Sie sich Sorgen um die Leistung machen, sollten Sie dies überprüfen Jetzt siehst du mich ... zeige / verberge die Performance (2010-05-04). Und andere Methoden verwenden, um Elemente ein- und auszublenden.


187
2017-11-25 09:16



Das funktioniert für mich, und ich benutze es show() und hide() um mein div unsichtbar / sichtbar zu machen:

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

169
2017-07-06 20:19



Wie Element Sichtbarkeit und jQuery funktioniert;

Ein Element könnte mit versteckt werden display:none, visibility:hidden oder opacity:0. Der Unterschied zwischen diesen Methoden:

  • display:none verbirgt das Element und es nimmt keinen Platz ein;
  • visibility:hidden verbirgt das Element, benötigt aber noch Platz im Layout;
  • opacity:0 verbirgt das Element als "Sichtbarkeit: Versteckt", und es nimmt immer noch Platz im Layout ein; Der einzige Unterschied besteht darin, dass man durch Opazität ein Element teilweise transparent machen kann;

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

    Nützliche jQuery-Umschaltmethoden: 

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

165
2018-04-24 21:04



Ich würde CSS-Klasse verwenden .hide { display: none!important; }.

Zum Verbergen / Anzeigen rufe ich an .addClass("hide")/.removeClass("hide"). Zum Überprüfen der Sichtbarkeit verwende ich .hasClass("hide").

Es ist eine einfache und klare Möglichkeit, Elemente zu überprüfen / zu verbergen / anzuzeigen, wenn Sie nicht planen, sie zu verwenden .toggle() oder .animate() Methoden.


133
2018-02-03 16:04