8662 Stimmen

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

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 ?

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/

118voto

conceptdeluxe Punkte 3516

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:

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

Der gleiche JavaScript-Code hat dann diese Ausgabe:

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

107voto

Maneesh Kumar Punkte 1307
expect($("#message_div").css("display")).toBe("none");

90voto

Irfan DANISH Punkte 7917
$(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>

72voto

Matthias Wegtun Punkte 1231

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

2 Stimmen

Wie haben Sie festgestellt, dass das Speichern eines Selektors in einer Variablen wirklich schneller ist?

4 Stimmen

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.

3 Stimmen

Dies eignet sich, wenn Sie während des gesamten Prozesses eine einzige Variable verwenden möchten, anstatt das gleiche Objekt immer wieder aufzurufen.

67voto

Ross Brasseaux Punkte 3775

Verwenden Sie die Klassenumschaltung, nicht die Stilbearbeitung

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 .


Bewährte Praktiken und Optimierung von JavaScript

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

CodeJaeger.com

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.

Powered by:

X