Wie prüfe ich, ob ein Element in jQuery ausgeblendet ist?

Question

Ist es möglich, die Sichtbarkeit eines Elements umzuschalten, indem man die Funktionen .hide() , .show() ou .toggle() ?

Wie würden Sie testen, ob ein Element visible ou hidden ?

Answer 1

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

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

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

Es ist dasselbe wie Vorschlag von Twernt aber auf ein einziges Element angewendet; und es entspricht dem in den jQuery-FAQ empfohlenen Algorithmus .

Wir verwenden jQuery's is() um das ausgewählte Element mit einem anderen Element, Selektor oder einem beliebigen jQuery-Objekt zu überprüfen. Diese Methode durchläuft die DOM-Elemente, um eine Übereinstimmung zu finden, die den übergebenen Parameter erfüllt. Sie gibt true zurück, wenn es eine Übereinstimmung gibt, andernfalls false.

Answer 2

Sie können die hidden Selektor:

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

Und die visible Selektor:

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

Answer 3

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

Bei der obigen Methode wird die Sichtbarkeit des Elternteils nicht berücksichtigt. Um auch das Elternteil zu berücksichtigen, sollten Sie .is(":hidden") ou .is(":visible") .

Zum Beispiel,

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

Die obige Methode berücksichtigt div2 sichtbar während :visible nicht. Aber die oben genannten könnte in vielen Fällen nützlich sein, vor allem, wenn Sie brauchen, um herauszufinden, ob es einen Fehler divs sichtbar in der versteckten Eltern, weil in solchen Bedingungen :visible wird nicht funktionieren.

Answer 4

Keine dieser Antworten geht auf das ein, was ich als die Frage verstehe, nach der ich gesucht habe, "Wie gehe ich mit Gegenständen um, die eine visibility: hidden ?" . Weder :visible noch :hidden wird dies übernehmen, da beide nach der Dokumentation nach einer Anzeige suchen. Soweit ich feststellen konnte, gibt es keinen Selektor für CSS-Sichtbarkeit zu behandeln. Hier ist, wie ich es aufgelöst (Standard jQuery Selektoren, kann es eine komprimierte Syntax sein):

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

Answer 5

Von Wie kann ich den Zustand eines umgeschalteten Elements bestimmen?

---

Sie können feststellen, ob ein Element zugeklappt ist oder nicht, indem Sie die :visible et :hidden Selektoren.

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

Wenn Sie einfach auf ein Element auf der Grundlage seiner Sichtbarkeit einwirken, können Sie einfach die :visible ou :hidden im Selektorausdruck. Zum Beispiel:

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