javascript when Wie überprüfe ich, ob ein Element in jQuery verborgen ist?




js is element hidden (24)

Um zu überprüfen ob es nicht sichtbar ist, benutze ich ! :

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

Oder das Folgende ist auch das Beispiel, das den jQuery-Selektor in einer Variablen speichert, um eine bessere Leistung zu erzielen, wenn Sie ihn mehrmals benötigen:

var $book = $('#book')

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

Die Sichtbarkeit eines Elements kann mit den Funktionen .hide() , .show() oder .toggle() .

Wie würden Sie testen, ob ein Element sichtbar oder verborgen ist?


Beispiel:

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


Man kann einfach das hidden oder visible Attribut verwenden, wie:

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

Oder Sie können das Gleiche wie folgt vereinfachen.

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

Sie müssen sowohl die ... Anzeige als auch die Sichtbarkeit prüfen:

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

Wenn wir nach $(this).is(":visible") suchen, prüft jQuery beide Dinge automatisch.


Sie können die hidden Auswahl verwenden:

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

Und der visible Wähler:

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

Beim Testen eines Elements mit :hidden Selector in jQuery sollte berücksichtigt werden, dass ein absolut positioniertes Element möglicherweise als ausgeblendet erkannt wird, obwohl seine untergeordneten Elemente sichtbar sind .

Dies erscheint zunächst etwas kontrapunktisch - wenn Sie jedoch die jQuery-Dokumentation genauer betrachten, erhalten Sie die relevanten Informationen:

Elemente können aus verschiedenen Gründen als verborgen betrachtet werden: [...] Ihre Breite und Höhe sind explizit auf 0 gesetzt. [...]

Das macht also in Bezug auf das Box-Modell und den berechneten Stil des Elements einen Sinn. Auch wenn Breite und Höhe nicht explizit auf 0 gesetzt sind, können sie implizit festgelegt werden .

Schauen Sie sich das folgende Beispiel an:

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>

AKTUALISIERUNG FÜR JQUERY 3.x:

Mit jQuery 3 ändert sich das beschriebene Verhalten! Elemente werden als sichtbar betrachtet, wenn sie über Layoutfelder verfügen, einschließlich der Breite und / oder Höhe von Null.

JSFiddle mit jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

Der gleiche JS wird dann diese Ausgabe haben:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

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

Wenn Sie prüfen, ob etwas sichtbar ist oder nicht, werden Sie oft sofort fortfahren und etwas anderes damit tun. jQuery-Verkettung macht dies einfach.

Wenn Sie also eine Auswahl haben und nur dann eine Aktion ausführen möchten, wenn sie sichtbar oder ausgeblendet ist, können Sie filter(":visible") oder filter(":hidden") und diese mit der gewünschten Aktion verketten nehmen.

Also statt einer if Anweisung 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" });

Eine Funktion kann erstellt werden, um die Sichtbarkeits- / Anzeigeattribute zu prüfen, um festzustellen, ob das Element in der Benutzeroberfläche angezeigt wird oder nicht.

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

Geige arbeiten


Verwenden Sie die Klassenumschaltung, nicht die Stilbearbeitung. . .

Die Verwendung von Klassen zum "Ausblenden" von Elementen ist einfach und auch eine der effizientesten Methoden. Das Umschalten einer Klasse "verborgen" mit einem Display "Keine" führt zu einer schnelleren Bearbeitung als die direkte Bearbeitung dieses Stils. Ich habe einiges davon in der -Frage ausführlich erklärt. Drehen von zwei Elementen im selben Div sichtbar / verborgen .

JavaScript Best Practices und Optimierung

Hier ist ein wirklich aufschlussreiches Video eines Google Tech Talk von Nicholas Zakas, dem Front-End-Ingenieur von Google:


Schließlich passt mir keines der Beispiele, also schrieb ich mein eigenes.

Tests (keine Unterstützung des Internet Explorer- filter:alpha ):

a) Prüfen Sie, ob das Dokument nicht ausgeblendet ist

b) Prüfen Sie, ob ein Element die Breite / Höhe / Deckkraft oder die display:none null hat display:none / visibility:hidden In Inline-Styles visibility:hidden

c) Prüfen Sie, ob das Zentrum (auch weil es schneller ist, jedes Pixel / jede Ecke zu testen) des Elements nicht durch ein anderes Element (und alle Vorfahren, z. B. overflow:hidden / scroll / ein Element über einem anderen Element) oder Bildschirmkanten overflow:hidden

d) Prüfen Sie, ob ein Element die Breite / Höhe / Deckkraft oder display:none Null hat display:none / Sichtbarkeit: in berechneten Stilen (unter allen Vorfahren) verborgen

Getestet am

Android 4.4 (Native Browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac-Webkit), Internet Explorer (Internet Explorer 5-11 Dokumentenmodi + Internet Explorer 8 auf einem virtuelle Maschine), 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;
    }
})();

Wie benutzt man:

is_visible(elem) // boolean

Beispiel für die Verwendung der sichtbaren Prüfung für Adblocker ist aktiviert:

$(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" ist eine ID, die Adblocker blockiert. Wenn Sie also prüfen, ob es sichtbar ist, können Sie feststellen, ob der Adblocker aktiviert ist.


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

Quelle:

Blogger-Plug-in-Play - jQuery-Tools und Widgets: So können Sie mit jQuery sehen, ob ein Element ausgeblendet oder sichtbar ist

jsFiddle:

JSFiddle - ipsjolly - k4WWj


ebdiv sollte auf style="display:none;" . Es funktioniert sowohl für Anzeigen als auch für Ausblenden:

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

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

Bei der obigen Methode wird die Sichtbarkeit des übergeordneten Elements nicht berücksichtigt. Um auch das übergeordnete .is(":hidden") zu berücksichtigen, sollten Sie .is(":hidden") oder .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. Obiges ist jedoch in vielen Fällen nützlich, vor allem, wenn Sie herausfinden müssen, ob im ausgeblendeten übergeordneten Element Fehler-Divs angezeigt werden, da in solchen Fällen :visible nicht funktioniert.


Da sich die Frage auf ein einzelnes Element bezieht, ist dieser Code möglicherweise geeigneter:

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

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

Entspricht dem Vorschlag von twernt , wird jedoch auf ein einzelnes Element angewendet. und es entspricht dem in den jQuery-FAQ empfohlenen Algorithmus


Eine andere Antwort, die Sie in Betracht ziehen sollten, ist, wenn Sie ein Element jQuery , sollten Sie jQuery . Statt es wirklich zu verstecken, entfernen Sie das gesamte Element. Sie kopieren jedoch den HTML Inhalt und das Tag selbst in eine jQuery-Variable und dann Sie müssen nur testen, ob ein solches Tag auf dem Bildschirm angezeigt wird. Verwenden Sie dazu das normale if (!$('#thetagname').length) .


Weil Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (wie für jQuery: visible Selector beschrieben ) - wir können überprüfen, ob ein Element wirklich sichtbar ist:

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

Keine dieser Antworten geht auf die Frage ein, die ich als die Frage verstehe, nach der ich suchte: "Wie gehe ich mit Elementen um, die visibility: hidden ?" . Weder :visible noch :hidden wird damit umgehen, da beide in der Dokumentation nach Anzeigen suchen. Soweit ich feststellen konnte, gibt es keinen Selektor für die CSS-Sichtbarkeit. So habe ich es gelöst (Standard-jQuery-Selektoren, möglicherweise eine etwas kompaktere Syntax):

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

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

Zum Ausblenden / .addClass("hide")/.removeClass("hide") rufe ich .addClass("hide")/.removeClass("hide") . Um die Sichtbarkeit zu überprüfen, verwende ich .hasClass("hide") .

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


Hier ist auch ein ternärer bedingter Ausdruck, um den Status des Elements zu überprüfen und dann umzuschalten:

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


Das kann funktionieren:

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

Überprüfen Sie einfach die Sichtbarkeit, indem Sie nach einem booleschen Wert suchen, z.

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

Ich habe diesen Code für jede Funktion verwendet. Andernfalls können Sie is(':visible') um die Sichtbarkeit eines Elements zu überprüfen.







visibility