[Javascript] Wie überprüfe ich, ob ein Element in jQuery versteckt ist?


Answers

Sie können den hidden Selektor verwenden:

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

Und der visible Selektor:

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

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

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




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 filter(":visible") oder filter(":hidden") gefolgt von der Verkettung mit der gewünschten Aktion 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 nach Sichtbarkeits- / Anzeigeattributen zu suchen, um zu messen, ob das Element in der Benutzeroberfläche angezeigt wird oder nicht.

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

Arbeitsgeige




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

Dies scheint in erster Linie etwas kontraintuitiv zu sein - obwohl die jQuery-Dokumentation näher betrachtet wird, gibt die relevante Information:

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

Das macht Sinn in Bezug auf das Box-Modell und den berechneten Stil für das Element. Auch wenn Breite und Höhe nicht explizit auf 0 gesetzt sind, können sie implizit gesetzt werden .

Sehen 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>

UPDATE FÜR JQUERY 3.x:

Mit jQuery 3 ändert sich das beschriebene Verhalten! Elemente werden als sichtbar betrachtet, wenn sie Layout-Boxen haben, einschließlich solcher mit Null Breite und / oder Höhe.

JSFiddle mit jQuery 3.0.0-alpha1:

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

Das gleiche JS wird dann diese Ausgabe haben:

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



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

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

Oder Folgendes ist auch der Fall: Speichern Sie den jQuery-Selektor in einer Variablen, um eine bessere Leistung zu erzielen, wenn Sie sie mehrfach benötigen:

var $book = $('#book')

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



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



Verwenden Sie die Klassenumschaltung, nicht die Stilbearbeitung. . .

Das Verwenden von Klassen, die zum "Verstecken" von Elementen bestimmt sind, ist einfach und auch eine der effizientesten Methoden. Das Umkehren einer Klasse "Versteckt" mit dem Display "Keine" wird schneller ausgeführt als die direkte Bearbeitung dieses Stils. Ich habe einiges in -Frage ausführlich erklärt. Zwei Elemente im selben Div sichtbar / versteckt .

JavaScript Best Practices und Optimierung

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




Vielleicht kannst du so etwas machen

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




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")



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

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

Es ist eine einfache und übersichtliche Methode, um Elemente zu überprüfen / zu verbergen / .toggle() , wenn Sie nicht die Methoden .toggle() oder .animate() verwenden .toggle() .




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

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



ebdiv sollte auf style="display:none;" . Es funktioniert zum Ein- und Ausblenden:

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



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

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

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

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

c) Prüfe, ob der Mittelpunkt (auch weil er schneller ist als das Testen jedes Pixels / Ecke) des Elements nicht durch andere Elemente (und alle Vorfahren, Beispiel: overflow:hidden / Bildlauf / ein Element über Enother) oder Bildschirmkanten overflow:hidden

d) Prüfe, ob ein Element die Breite / Höhe / Deckkraft von null hat oder display:none / visibility: versteckt in berechneten Styles (unter allen Vorfahren)

Getestet am

Android 4.4 (Nativer Browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Internet Explorer 5-11 Dokumentmodi + Internet Explorer 8 auf a 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



Auch hier ist ein ternärer Bedingungsausdruck, um den Zustand des Elements zu überprüfen und dann umzuschalten:

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



Keine dieser Antworten behandelt 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 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
    }
});



Links