Wie kann ich überprüfen, ob ein Objekt in jQuery verborgen ist?

Sie können die Sichtbarkeit der .hide() mit den Funktionen .hide() , .show() oder .toggle() .

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

6967
07 окт. Philip Morton fragte am 7. Oktober. 2008-10-07 16:03 08 um 16:03 2008-10-07 16:03
@ 56 Antworten
  • 1
  • 2

Da sich die Frage auf ein Element bezieht, kann dieser Code geeigneter sein:

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

Dasselbe wie der Vorschlag von zwanzig , jedoch auf ein einzelnes Element angewandt. Dies entspricht dem in den jQuery-FAQ empfohlenen Algorithmus

8594
07 окт. Antwort ist gegeben Tsvetomir Tsonev 07 Okt. 2008-10-07 16:30 08 um 16:30 Uhr 2008-10-07 16:30 Uhr

Sie können die hidden Auswahl verwenden:

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

Und visible Auswahl:

 // Matches all elements that are visible $('element:visible') 
1318
07 окт. antworten gegeben twernt 07 Okt 2008-10-07 16:16 08 um 16:16 Uhr 2008-10-07 16:16
 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 ein Elternteil anzuzeigen, müssen 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 behandelt div2 sichtbar und :visible nicht. Das oben genannte kann jedoch in vielen Fällen nützlich sein, insbesondere wenn Sie herausfinden möchten, ob im ausgeblendeten übergeordneten Element Div-Fehler sichtbar sind, da unter folgenden Bedingungen :visible nicht funktioniert.

831
07 окт. Antwort an Mote vom 7. Oktober. 2008-10-07 16:09 08 um 16:09 2008-10-07 16:09

Keine dieser Antworten betrifft das, was ich verstehe, und dies ist die Frage, nach der ich gesucht habe: "Wie verarbeite ich Elemente mit visibility: hidden ?". Weder :visible , noch :hidden wird damit nicht umgehen, da beide in der Dokumentation nach dem Mapping suchen. Soweit ich das beurteilen kann, gibt es keine Auswahlmöglichkeit für die CSS-Sichtbarkeit. So habe ich es gelöst (Standard-jQuery-Selektoren, vielleicht eine etwas prägnantere Syntax):

 $(".item").each(function() { if ($(this).css("visibility") == "hidden") { // handle non visible state } else { // handle visible state } }); 
474
24 марта '11 в 21:44 2011-03-24 21:44 Die Antwort ist gegeben von aaronLile 24. März 11 um 21:44 2011-03-24 21:44

Von So ermitteln Sie den Status des Schaltobjekts?


Sie können bestimmen, ob ein Element kompiliert wird oder nicht, indem Sie die :visible und :hidden .

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

Wenn Sie einfach auf ein Element basierend auf seinem Aussehen einwirken, können Sie Folgendes einfach einfügen :visible oder :hidden in den Selektorausdruck. Zum Beispiel:

  $('#myDiv:visible').animate({left: '+=200px'}, 'slow'); 
343
14 янв. Die Antwort wird von user574889 Jan 14 gegeben 2011-01-14 00:13 '11 am 0:13 2011-01-14 00:13

Wenn Sie prüfen, ob etwas sichtbar ist oder nicht, werden Sie oft sofort weitergehen und etwas anderes damit tun. Die jQuery-Kette macht es einfach.

Wenn Sie also einen Selektor haben und eine Aktion ausführen möchten, nur wenn diese sichtbar oder ausgeblendet ist, können Sie filter(":visible") oder filter(":hidden") und ihn dann binden Aktion, die Sie ergreifen möchten.

Also anstelle einer if zum Beispiel:

 if ($('#btnUpdate').is(":visible")) { $('#btnUpdate').animate({ width: "toggle" }); // Hide button } 

Oder effektiver, 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" }); 
253
25 июля '09 в 13:21 2009-07-25 13:21 Die Antwort wird gegeben Simon_Weaver 25. Juli 09 um 13:21 2009-07-25 13:21

Selektor :visible gemäß jQuery-Dokumentation :

  • Sie haben none CSS- none .
  • Dies sind Formularelemente mit type="hidden" .
  • Ihre Breite und Höhe sind eindeutig auf 0 gesetzt.
  • Das übergeordnete Element wird ausgeblendet, sodass das Element nicht auf der Seite angezeigt wird.

Elemente mit visibility: hidden oder opacity: 0 werden als sichtbar betrachtet, da sie im Layout noch Platz benötigen.

Dies ist in einigen Fällen nützlich und für andere unbrauchbar. Wenn Sie überprüfen möchten, ob ein Element sichtbar ist ( display != none ), und die Sichtbarkeit der übergeordneten Elemente ignorieren, werden Sie feststellen, dass .css("display") == 'none' tritt nicht nur schneller auf, sondern liefert auch die Korrektheit der Sichtbarkeit.

Wenn Sie die Sichtbarkeit anstelle der Anzeige überprüfen möchten, sollten Sie .css("visibility") == "hidden" verwenden: .css("visibility") == "hidden" .

Beachten Sie auch die zusätzlichen jQuery-Hinweise :

Weil :visible eine Erweiterung von jQuery ist und nicht Teil der CSS-Spezifikation ist, können Abfragen mit :visible die Leistungsverbesserungen der integrierten DOM-Methode querySelectorAll() . Um die beste Leistung zu erzielen, verwenden Sie :visible , um Elemente auszuwählen. .filter(":visible") zunächst Elemente mit dem reinen CSS-Selector aus und verwenden Sie dann .filter(":visible") .

Wenn Sie sich Sorgen um die Leistung machen, sollten Sie jetzt überprüfen, ob Sie mich sehen ... Leistung anzeigen / ausblenden (2010-05-04) und andere Methoden zum Anzeigen und Ausblenden von Elementen verwenden.

206
25 нояб. Die Antwort wird am 25. November von Pedro Rainho gegeben. 2011-11-25 12:16 '11 am 12:16 2011-11-25 12:16

Es funktioniert für mich und ich benutze show() und hide() , um mein div sichtbar zu machen:

 if( $(this).css('display') == 'none' ){  } else {  } 
187
06 июля '11 в 23:19 2011-07-06 23:19 Die Antwort gibt Abiy am 6. Juli 11 um 23:19 Uhr 2011-07-06 23:19

Funktionsweise der Elementsichtbarkeit und jQuery

Das Element kann mit display:none ausgeblendet werden display:none , visibility:hidden oder opacity:0 . Der Unterschied zwischen diesen Methoden:

  • display:none verbirgt den Gegenstand und belegt keinen Platz;
  • visibility:hidden verbirgt das Element, nimmt jedoch immer noch Platz im Layout ein.
  • opacity:0 verbirgt das Element als "sichtbar: ausgeblendet" und nimmt immer noch Platz im Layout ein; Der einzige Unterschied besteht darin, dass die Deckkraft es ermöglicht, dass das Element teilweise transparent ist.

     if ($('.target').is(':hidden')) { $('.target').show(); } else { $('.target').hide(); } if ($('.target').is(':visible')) { $('.target').hide(); } else { $('.target').show(); } if ($('.target-visibility').css('visibility') == 'hidden') { $('.target-visibility').css({ visibility: "visible", display: "" }); } else { $('.target-visibility').css({ visibility: "hidden", display: "" }); } if ($('.target-visibility').css('opacity') == "0") { $('.target-visibility').css({ opacity: "1", display: "" }); } else { $('.target-visibility').css({ opacity: "0", display: "" }); } 

    Nützliche jQuery-Switch-Methoden:

     $('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); }); 
181
25 апр. Die Antwort wird von webvitaly 25. April gegeben 2012-04-25 00:04 '12 am 12:04 AM 2012-04-25 00:04

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

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

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

145
03 февр. Antwort von Evgeny Levin 03 Feb. 2012-02-03 19:04 '12 am 19:04 2012-02-03 19:04

Sie können dies auch mit einfachem Javascript tun:

 function isRendered(domObj) { if ((domObj.nodeType != 1) || (domObj == document.body)) { return true; } if (domObj.currentStyle  domObj.currentStyle["display"] != "none"  domObj.currentStyle["visibility"] != "hidden") { return isRendered(domObj.parentNode); } else if (window.getComputedStyle) { var cs = document.defaultView.getComputedStyle(domObj, null); if (cs.getPropertyValue("display") != "none"  cs.getPropertyValue("visibility") != "hidden") { return isRendered(domObj.parentNode); } } return false; } 

Anmerkungen:

  • Funktioniert überall

  • Funktioniert für verschachtelte Elemente

  • Funktioniert für CSS und Inline-Stile.

  • Kein Rahmen erforderlich

140
16 июля '12 в 22:18 2012-07-16 22:18 Die Antwort gibt Matt Brock am 16. Juli '12 um 22:18 Uhr 2012-07-16 22:18

Sie können das Attribut hidden oder visible , zum Beispiel:

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

Oder Sie können dasselbe mit dem folgenden vereinfachen.

 $(element).is(":visible") 
120
23 мая '12 в 15:59 2012-05-23 15:59 Die Antwort gibt ScoRpion am 23. Mai '12 um 15:59 Uhr 2012-05-23 15:59

Eine andere Antwort, die Sie berücksichtigen müssen: Wenn Sie ein Element ausblenden, sollten Sie jQuery verwenden . Statt es jedoch auszublenden, löschen Sie das gesamte Element. Sie kopieren jedoch dessen HTML-Code und das Tag selbst in die Variable jQuery und dann Sie müssen einen Test durchführen, wenn ein solches Tag auf dem Bildschirm angezeigt wird. Verwenden Sie dazu das gewöhnliche if (!$('#thetagname').length) .

110
22 апр. Die Antwort gibt think123 vom 22. April 2012-04-22 02:40 '12 at 2:40 2012-04-22 02:40

Demo-Link

Quelle:

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

105
25 янв. Antwort ist Code Spy 25. Januar 2013-01-25 08:34 '13 am 8:34 2013-01-25 08:34

ebdiv sollte auf style="display:none;" Dies funktioniert sowohl für das Zeigen als auch für das Verstecken:

 $(document).ready(function(){ $("#eb").click(function(){ $("#ebdiv").toggle(); }); }); 
103
13 июня '12 в 16:20 2012-06-13 16:20 Die Antwort wird von Vaishu am 13. Juni um 16:20 Uhr 2012-06-13 16:20 gegeben

Beim Testen eines Elements mit einem :hidden Selector in jQuery sollte berücksichtigt werden, dass ein Element mit einer absoluten Position als ausgeblendet erkannt werden kann, obwohl deren untergeordnete Elemente sichtbar sind .

Dies scheint zunächst etwas uninteressant zu sein - auch wenn ein genauerer Blick auf die jQuery-Dokumentation relevante Informationen enthält:

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

Es macht also wirklich Sinn in Bezug auf das Boxmodell und den berechneten Stil für das Element. 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:

 .foo { position: absolute; left: 10px; top: 10px; background: #ff0000; } .bar { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; background: #0000ff; } 
http://jsfiddle.net/pM2q3/7/ 

Dieselbe JS wird diese Ausgabe haben:

 console.log($('.foo').is(':hidden')); // false console.log($('.bar').is(':hidden')); // false 
85
06 мая '14 в 13:50 2014-05-06 13:50 Die Antwort wird gegeben Konzeptdeluxe 6. Mai 14 um 13:50 2014-05-06 13:50

Es kann funktionieren:

 expect($("#message_div").css("display")).toBe("none"); 
82
20 июля '12 в 15:44 2012-07-20 15:44 Die Antwort wird von Maneesh Kumar am 20. Juli '12 um 15:44 Uhr 2012-07-20 15:44 gegeben

Beispiel:

 <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> 
62
28 окт. Antwort von Irfan DÄNISCH 28. Oktober 2013-10-28 09:43 13 um 09:43 2013-10-28 09:43

Um zu überprüfen, ob dies nicht sichtbar ist, verwende ich ! :

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

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

 var $book = $('#book') if(!$book.is(':visible')) { alert('#book is not visible') } 
61
04 июня '13 в 16:42 2013-06-04 16:42 Die Antwort gibt Matthias Wegtun am 04. Juni 13 um 04:42 Uhr 2013-06-04 16:42

Verwenden Sie die Klassenumschaltung, nicht die Stilbearbeitung.,.

Die Verwendung von Klassen zum "Ausblenden" von Elementen ist sowohl einfach als auch eine der effektivsten Methoden. Wenn Sie die Klasse mit dem Typ "Keine" Display , wird die Klasse schneller als das direkte Bearbeiten dieses Stils. Ich habe einige dieser Fragen in der Frage der Rotation zweier sichtbarer / verborgener Elemente im selben Div ausführlich erläutert.


JavaScript-Empfehlungen und Optimierung

Hier ist ein wirklich lehrreiches Video zu Google Tech Talk von Nicholas Zakas, Chefingenieur von Google:

59
19 июля '13 в 0:17 2013-07-19 00:17 Die Antwort wird gegeben Lopsided 19. Juli 13 um 0:17 2013-07-19 00:17

Ein Beispiel für die Verwendung der Sichtprüfung für einen Anzeigenblock:

 <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 Kennung, die einen Block blockiert. Wenn Sie dies überprüfen, können Sie also feststellen, ob der Anzeigenblock aktiviert ist.

55
27 апр. Die Antwort gibt Roman Losev am 27. April. 2015-04-27 10:57 '15 am 10:57 2015-04-27 10:57

Am Ende passte keines der Beispiele zu mir, also schrieb ich mein eigenes.

Tests (ohne Internet Explorer-Unterstützungsfilter filter:alpha ):

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

b) Prüfen Sie, ob das Element Breite / Höhe / Deckkraft oder display:none Null aufweist display:none / visibility:hidden in den integrierten Stilen visibility:hidden .

c) Stellen Sie sicher, dass die Mitte des Elements (auch weil es schneller ist als das Testen jedes Pixels / jeder Ecke) nicht durch ein anderes Element (und alle Vorfahren, z. B. overflow:hidden / scroll / ein Element über einem anderen Element) oder den Randbildschirm overflow:hidden

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

Getestet

Android 4.4 (eigener Browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac-Webkit), Internet Explorer (Internet Explorer 5-11-Modi + Internet Explorer 8 auf einer virtuellen 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 zu verwenden:

 is_visible(elem) // boolean 
55
09 апр. Die Antwort ist gegeben Aleko 09 April. 2014-04-09 20:06 14 um 20:06 2014-04-09 20:06

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 $(this).is(":visible") überprüfen, prüft jQuery automatisch beide Dinge.

50
31 янв. Die Antwort wird von Premshankar Tiwari am 31. Januar gegeben 2014-01-31 09:24 '14 um 09:24 Uhr 2014-01-31 09:24

Vielleicht kannst du so etwas tun.

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <input type="text" id="tElement" style="display:block;">Firstname</input> 
38
07 апр. Antwort von Mathias Stavrou 07 Apr 2015-04-07 15:26 '15 am 15:26 2015-04-07 15:26

Da 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 ), können wir prüfen, ob das Element auf diese Weise 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; } }); 
32
19 марта '14 в 15:42 2014-03-19 15:42 Die Antwort wird von Andron am 19. März 14 um 15:42 Uhr 2014-03-19 15:42 gegeben
 if($('#postcode_div').is(':visible')) { if($('#postcode_text').val()=='') { $('#spanPost').text('\u00a0'); } else { $('#spanPost').text($('#postcode_text').val()); } 
30
15 нояб. Die Antwort gibt Gaurav am 15. November. 2013-11-15 13:41 '13 am 13:41 2013-11-15 13:41

Was aber, wenn das CSS-Element so aussieht?

 .element{ position: absolute;left:-9999; } 

Dies ist also die Antwort auf die Stapelüberlauffrage. Es sollte auch geprüft werden, ob ein Element nicht auf dem Bildschirm angezeigt wird .

30
23 авг. Die Antwort wird von RN Kushwaha 23 Aug gegeben. 2014-08-23 23:53 14 am 23:53 2014-08-23 23:53

Überprüfen Sie einfach die Sichtbarkeit, indem Sie den logischen Wert prüfen, zum Beispiel:

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

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

30
11 авг. Die Antwort ist pixellabme 11 aug. 2014-08-11 08:28 '14 um 08:28 2014-08-11 08:28

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

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

Arbeitsskript

29
29 авг. Die Antwort ist V31 29 aug. 2014-08-29 23:20 14 um 23:20 2014-08-29 23:20

Es gibt auch einen ternären bedingten Ausdruck, um den Status des Elements zu überprüfen und anschließend umzuschalten:

 $('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); }); 
29
06 нояб. Antwort von cssimsek 06 Nov. 2013-11-06 02:32 '13 am 2:32 2013-11-06 02:32
  • 1
  • 2

Weitere Fragen zu Labels: oder Frage stellen