Kako provjeriti je li neka stavka skrivena u jQuery?

Vidljivost stavke možete promijeniti pomoću .hide() , .show() ili .toggle() .

Kako biste testirali ako je neka stavka vidljiva ili skrivena?

6967
07 окт. Philip Morton je pitao 07. listopada. 2008-10-07 16:03 '08 u 16:03 2008-10-07 16:03
@ 56 odgovora
  • 1
  • 2

Budući da se pitanje odnosi na jedan element, ovaj kod može biti prikladniji:

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

Isto kao i prijedlog Dvadeset , ali primjenjuje se na jedan element; a to odgovara algoritmu preporučenom u JQuery FAQ

8594
07 окт. dan je odgovor Tsvetomir Tsonev 07 okt. 2008-10-07 16:30 '08 u 16:30 sati 2008-10-07 16:30

Možete koristiti hidden selektor:

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

I visible selektor:

 // Matches all elements that are visible $('element:visible') 
1318
07 окт. odgovor dan twernt 07. \ t 2008-10-07 16:16 '08 u 16:16 2008-10-07 16:16
 if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){ // element is hidden } 

Gornja metoda ne uzima u obzir vidljivost roditelja. Da biste pregledali roditelja, morate koristiti .is(":hidden") ili .is(":visible") .

Na primjer

 <div id="div1" style="display:none"> <div id="div2" style="display:block">Div2</div> </div> 

Gornja metoda će tretirati div2 vidljivo, a :visible nije. No, gore navedeno može biti korisno u mnogim slučajevima, pogotovo kada trebate saznati postoje li kakve pogreške vidljive u skrivenim roditeljskim elementima, jer pod tim uvjetima :visible neće raditi.

831
07 окт. odgovor dati Mote 7. listopada. 2008-10-07 16:09 '08 u 16:09 2008-10-07 16:09

Nijedan od tih odgovora ne odnosi se na ono što ja razumijem, i to je pitanje koje sam tražio: "Kako obrađujem elemente s visibility: hidden ?". Ni :visible , niti :hidden neće to riješiti, jer oboje traže mapiranje u dokumentaciji. Koliko mogu reći, nema selektora koji bi obradio CSS vidljivost. Evo kako sam to riješio (standardni jQuery selektori, možda i sažeta sintaksa):

 $(".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 odgovor je dao aaronLile 24. ožujka '11 u 21:44 2011-03-24 21:44

Od Kako odrediti stanje komutirane stavke?


Možete odrediti je li element sastavljen ili ne koristi :visible i :hidden selektore.

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

Ako jednostavno djelujete na element koji se temelji na njegovom izgledu, možete jednostavno uključiti :visible ili :hidden u selektorskom izrazu. Na primjer:

  $('#myDiv:visible').animate({left: '+=200px'}, 'slow'); 
343
14 янв. odgovor daje korisnik574889 14. siječnja 2011-01-14 00:13 '11 u 0:13 2011-01-14 00:13

Često, provjerom je li nešto vidljivo ili ne, odmah ćete ići ravno naprijed i učiniti nešto drugo s njim. Lanac jQuery olakšava rad.

Dakle, ako imate selektor i želite izvršiti neku radnju na njemu, samo ako je vidljiv ili skriven, možete upotrijebiti filter(":visible") ili filter(":hidden") , a zatim ga povezati s koju želite poduzeti.

Dakle, umjesto if , na primjer:

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

Ili učinkovitije, ali još ružnije:

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

Sve to možete učiniti na jednom retku:

 $('#btnUpdate').filter(":visible").animate({ width: "toggle" }); 
253
25 июля '09 в 13:21 2009-07-25 13:21 odgovor je dat Simon_Weaver 25. srpnja '09 u 13:21 2009-07-25 13:21

Odabir :visible prema dokumentaciji jQuery :

  • Imaju display CSS vrijednosti none .
  • To su elementi oblika s type="hidden" .
  • Njihova širina i visina jasno su postavljene na 0.
  • Roditeljski element je skriven, tako da se element ne prikazuje na stranici.

Stavke s visibility: hidden ili opacity: 0 se smatraju vidljivima, jer još uvijek zauzimaju prostor u rasporedu.

To je korisno u nekim slučajevima i beskorisno za druge, jer ako želite provjeriti je li element vidljiv ( display != none ), ignorirajući vidljivost roditeljskih elemenata, naći ćete da izvršavanje .css("display") == 'none' pojavljuje se ne samo brže nego i vraća točnost vidljivosti.

Ako želite provjeriti vidljivost umjesto prikaza, trebate koristiti: .css("visibility") == "hidden" .

Također zabilježite dodatne napomene jQuery :

Jer :visible je proširenje jQuery, a ne dio CSS specifikacije, upiti koji koriste :visible ne mogu iskoristiti poboljšanja performansi koje pruža ugrađena DOM querySelectorAll() metoda. Da biste postigli najbolje performanse kada koristite :visible za odabir elemenata, prvo odaberite elemente pomoću čistog CSS selektora, a zatim upotrijebite .filter(":visible") .

Osim toga, ako ste zabrinuti zbog performansi, sada biste trebali provjeriti vidite li me ... prikaz / sakrivanje performansi (2010-05-04), i korištenje drugih metoda za prikaz i skrivanje elemenata.

206
25 нояб. Odgovor je uputio Pedro Rainho 25. studenog. 2011-11-25 12:16 '11 u 12:16 2011-11-25 12:16

Radi za mene i koristim show() i hide() da bi moj div sakriven / vidljiv:

 if( $(this).css('display') == 'none' ){  } else {  } 
187
06 июля '11 в 23:19 2011-07-06 23:19 odgovor je dao Abiy 6. srpnja 2011. u 23:19 2011-07-06 23:19

Kako vidljivost elementa i jQuery rade

Element može biti skriven korištenjem display:none , visibility:hidden ili opacity:0 . Razlika između ovih metoda:

  • display:none sakriva stavku i ne zauzima prostor;
  • visibility:hidden skriva predmet, ali još uvijek zauzima prostor u rasporedu;
  • opacity:0 skriva stavku kao "vidljivo: skriveno" i još uvijek zauzima mjesto u rasporedu; jedina razlika je što neprozirnost omogućuje elementu da bude djelomično transparentan;

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

    Korisne metode prebacivanja u jQuery:

     $('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); }); 
181
25 апр. odgovor je dao webvitaly 25. travnja 2012-04-25 00:04 '12 u 12:04 AM 2012-04-25 00:04

.hide { display: none!important; } bih CSS klasu .hide { display: none!important; } .hide { display: none!important; } .

Za skrivanje / prikazivanje, pozivam .addClass("hide")/.removeClass("hide") . Za provjeru vidljivosti koristim .hasClass("hide") .

To je jednostavan i jasan način za provjeru / sakrivanje / prikazivanje stavki ako ne planirate koristiti metode .toggle() ili .animate() .

145
03 февр. odgovor dao Evgeny Levin 03. veljače. 2012-02-03 19:04 '12 u 19:04 2012-02-03 19:04

To možete učiniti i pomoću običnog javascripta:

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

primjedbe:

  • Radi svugdje

  • Radi za ugniježđene stavke

  • Radi za CSS i inline stilove.

  • Nije potreban okvir

140
16 июля '12 в 22:18 2012-07-16 22:18 odgovor je dao Matt Brock 16. srpnja '12. u 10:18 sati. 2012-07-16 22:18

Atribut možete jednostavno koristiti hidden ili visible , na primjer:

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

Ili možete pojednostaviti istu stvar sa sljedećim.

 $(element).is(":visible") 
120
23 мая '12 в 15:59 2012-05-23 15:59 odgovor je dan ScoRpion 23. svibnja '12 u 3:59 pm 2012-05-23 15:59

Još jedan odgovor koji trebate uzeti u obzir: ako sakrijete element, trebate koristiti jQuery , ali umjesto da ga sakrijete, izbrišete cijeli element, ali kopirate njegov HTML i samu oznaku u jQuery varijablu, a zatim trebate učiniti test ako postoji takva oznaka na zaslonu, koristeći uobičajeno if (!$('#thetagname').length) .

110
22 апр. odgovor je dao think123 22. travnja 2012-04-22 02:40 '12 u 2:40 2012-04-22 02:40

Demo veza

izvor:

Blogger Plug n Play - JQuery Alati i Widgeti: Kako znati da li je stavka skrivena ili vidljiva pomoću jQuery

105
25 янв. Odgovor je Code Spy 25. siječnja 2013-01-25 08:34 '13 u 8:34 2013-01-25 08:34

ebdiv bi trebao biti postavljen na style="display:none;" Ovo funkcionira za prikazivanje i skrivanje:

 $(document).ready(function(){ $("#eb").click(function(){ $("#ebdiv").toggle(); }); }); 
103
13 июня '12 в 16:20 2012-06-13 16:20 odgovor je dao Vaishu 13. lipnja 2012. u 4:20 pm 2012-06-13 16:20

Prilikom testiranja elementa s :hidden selektorom u jQuery, treba uzeti u obzir da se element s apsolutnom lokacijom može prepoznati kao skriven, iako su njihovi podređeni elementi vidljivi .

Isprva se to čini pomalo protuintuitivnim - iako detaljniji pregled jQuery dokumentacije pruža relevantne informacije:

Elemente se može smatrati skrivenim iz nekoliko razloga: [...] Njihova širina i visina jasno su postavljene na 0. [...]

Dakle, stvarno ima smisla s obzirom na okvirni model i izračunati stil za element. Čak i ako širina i visina nisu eksplicitno postavljene na 0, mogu se implicitno postaviti.

Pogledajte sljedeći primjer:

 .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/ 

Isti JS će imati ovaj izlaz:

 console.log($('.foo').is(':hidden')); // false console.log($('.bar').is(':hidden')); // false 
85
06 мая '14 в 13:50 2014-05-06 13:50 odgovor je dao conceptdeluxe 6. svibnja '14 u 13:50 2014-05-06 13:50

Može raditi:

 expect($("#message_div").css("display")).toBe("none"); 
82
20 июля '12 в 15:44 2012-07-20 15:44 odgovor je dao Maneesh Kumar 20. srpnja '12 u 15:44 2012-07-20 15:44

primjer:

 <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 окт. odgovor od Irfan DANISH 28. listopada 2013-10-28 09:43 '13 u 9:43 2013-10-28 09:43

Da bih provjerio je li ovo vidljivo, koristim ! :

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

Ili sljedeće: sam, zadržavajući izbornik jQuery u varijabli kako bi imali bolje performanse kada vam je potrebno nekoliko puta:

 var $book = $('#book') if(!$book.is(':visible')) { alert('#book is not visible') } 
61
04 июня '13 в 16:42 2013-06-04 16:42 odgovor je dao Matthias Wegtun 4. lipnja 2013. u 4:42 2013-06-04 16:42

Koristite prebacivanje razreda, a ne uređivanje stila.,.

Korištenje klasa dizajniranih za "sakrivanje" elemenata je jednostavno kao i jedna od najučinkovitijih metoda. Prebacivanje klase "skriveno" s tipom Display "ništa" bit će brže nego izravno uređivanje tog stila. Detaljno sam objasnio neka od ovih pitanja u pitanju rotacije dva elementa vidljiva / skrivena u istom divu .


JavaScript preporuke i optimizacija

Ovo je doista poučan video na Google Tech Talku od Googleovog glavnog inženjera Nicholasa Zakasa:

59
19 июля '13 в 0:17 2013-07-19 00:17 odgovor je dat Lopsided 19. srpnja '13 u 0:17 2013-07-19 00:17

Primjer upotrebe vidljive provjere za oglasnu jedinicu:

 <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" je identifikator koji blokira blok. Stoga ako označite ovu opciju, ako je ona vidljiva, možete otkriti je li oglasna jedinica omogućena.

55
27 апр. odgovor je dao Roman Losev 27 apr. 2015-04-27 10:57 '15 u 10:57 2015-04-27 10:57

Na kraju, ni jedan od primjera ne odgovara meni, pa sam napisao svoj.

Testovi (bez filter:alpha podrške za Internet Explorer filter:alpha ):

a) Provjerite je li dokument skriven

b) Provjerite ima li element nulu širina / visina / neprozirnost ili display:none / visibility:hidden u ugrađenim stilovima.

c) Uvjerite se da centar (također i zato što je brži od testiranja svakog piksela / ugla) elementa nije skriven drugim elementom (i svim precima, na primjer: overflow:hidden / skrol / jedan element iznad) ili rubni zaslon

d) Provjerite ima li element nulu širina / visina / neprozirnost ili display:none / vidljivost: skrivena u izračunatim stilovima (među svim precima)

ispitan

Android 4.4 (vlastiti preglednik / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Internet Explorer 5-11 i Internet Explorer 8 na virtualnom računalu) ), 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; } })(); 

Kako koristiti:

 is_visible(elem) // boolean 
55
09 апр. odgovor je dan Aleko 09 apr. 2014-04-09 20:06 '14 u 20:06 2014-04-09 20:06

Morate provjeriti i ... Prikaz, kao i vidljivost:

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

Ako provjerimo $(this).is(":visible") , jQuery automatski provjerava obje stvari.

50
31 янв. odgovor je dao Premshankar Tiwari 31. siječnja 2014-01-31 09:24 '14 u 09:24 2014-01-31 09:24

Možda možeš učiniti nešto ovako.

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

Budući da su Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (kao što je opisano za jQuery: vidljiv selektor ) - možemo provjeriti je li element vidljiv na ovaj način:

 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 odgovor je dao Andron 19. ožujka '14 u 15:42 2014-03-19 15:42
 if($('#postcode_div').is(':visible')) { if($('#postcode_text').val()=='') { $('#spanPost').text('\u00a0'); } else { $('#spanPost').text($('#postcode_text').val()); } 
30
15 нояб. odgovor je dao Gaurav na 15 nov. 2013-11-15 13:41 '13 u 13:41 2013-11-15 13:41

Ali što ako CSS element izgleda ovako?

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

Ovo je odgovor na pitanje preljeva stogova. Također treba razmotriti kako provjeriti je li neka stavka isključena .

30
23 авг. odgovor je dao RN Kushwaha 23. kolovoza. 2014-08-23 23:53 '14 u 23:53 2014-08-23 23:53

Samo provjerite vidljivost provjerom logičke vrijednosti, na primjer:

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

Koristio sam ovaj kod za svaku funkciju. Inače, možete koristiti is(':visible') za provjeru vidljivosti elementa.

30
11 авг. odgovor je dat pixellabme 11 aug. 2014-08-11 08:28 '14 u 8:28 2014-08-11 08:28

Može se kreirati funkcija za provjeru atributa vidljivosti / prikaza kako bi se utvrdilo prikazuje li se element u korisničkom sučelju ili ne.

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

Radna skripta

29
29 авг. odgovor je dan V31 29 aug. 2014-08-29 23:20 '14 u 23:20 2014-08-29 23:20

Postoji i ternarni uvjetni izraz koji provjerava stanje elementa, a zatim ga prebacuje:

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

Ostala pitanja o oznakama ili Postavite pitanje