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
?
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
?
Beim Testen eines Elements gegen :hidden
Selektor in jQuery sollte berücksichtigt werden, dass ein absolut positioniertes Element kann als versteckt erkannt werden, obwohl seine untergeordneten Elemente sichtbar sind .
Dies scheint zunächst etwas kontraintuitiv zu sein - ein genauerer Blick in die jQuery-Dokumentation gibt jedoch Aufschluss darüber:
Elemente können aus verschiedenen Gründen als verborgen betrachtet werden: [...] Ihre Breite und Höhe werden explizit auf 0 gesetzt. [...]
Dies ist also in Bezug auf das Box-Modell und den berechneten Stil für das Element tatsächlich sinnvoll. Auch wenn Breite und Höhe nicht festgelegt sind ausdrücklich auf 0 gesetzt werden, können sie implizit .
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>
Update für jQuery 3.x:
Mit jQuery 3 wird sich das beschriebene Verhalten ändern! Elemente werden als sichtbar betrachtet, wenn sie irgendwelche Layoutboxen haben, einschließlich solcher mit einer Breite und/oder Höhe von Null.
JSFiddle mit jQuery 3.0.0-alpha1:
Der gleiche JavaScript-Code hat dann diese Ausgabe:
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
$(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>
Um zu prüfen, ob sie nicht sichtbar ist, verwende ich !
:
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
Oder die folgende ist auch die sam, Speichern der jQuery-Selektor in einer Variable, um eine bessere Leistung, wenn Sie es mehrmals benötigen:
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}
Wie haben Sie festgestellt, dass das Speichern eines Selektors in einer Variablen wirklich schneller ist?
Hallo @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Dort können Sie den Test durchführen. Auf jeden Fall ist es gut, wenn die Daten im Cache gespeichert werden, damit sie schneller abgerufen werden können.
Die Verwendung von Klassen zum "Verstecken" von Elementen ist einfach und auch eine der effizientesten Methoden. Das Umschalten einer Klasse auf 'versteckt' mit einer Display
Stil "none" ist schneller als die direkte Bearbeitung dieses Stils. Ich erklärte einige dieser ziemlich gründlich in Stack Overflow Frage Zwei Elemente im selben div sichtbar/unsichtbar machen .
Hier ist ein wirklich aufschlussreiches Video eines Google Tech Talk von Google Front-End-Ingenieur Nicholas Zakas:
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
68 Stimmen
Es ist erwähnenswert (auch nach all dieser Zeit), dass
$(element).is(":visible")
funktioniert für jQuery 1.4.4, aber nicht für jQuery 1.3.2, unter Internet Explorer 8 . Dies kann getestet werden mit Tsvetomir Tsonevs hilfreiches Test-Snippet . Denken Sie einfach daran, die Version von jQuery zu ändern, um unter jedem zu testen.5 Stimmen
Dies ist eine verwandte, wenn auch andere Frage: stackoverflow.com/questions/17425543/
2 Stimmen
Wenn Sie nicht an der virtuellen Ausblendung von CSS-Elementen interessiert sind, sondern an der physischen Sichtbarkeit im "Viewport-Bereich" für den Benutzer, dann sollten Sie sich Folgendes ansehen stackoverflow.com/questions/487073/ y stackoverflow.com/questions/123999/