Paano masuri kung nakatago ang isang item sa jQuery?

Maaari mong ilipat ang visibility ng item gamit ang mga .hide() , .show() o .toggle() .

Paano mo susubukan kung ang isang item ay nakikita o nakatago?

6967
07 окт. Tinanong ni Philip Morton ang 07 oct. 2008-10-07 16:03 '08 at 4:03 pm 2008-10-07 16:03
@ 56 sagot
  • 1
  • 2

Dahil ang tanong ay nauugnay sa isang elemento, maaaring mas angkop ang code na ito:

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

Ang parehong bi>Dalawampung panukala , ngunit inilalapat sa isang solong elemento; at tumutugma ito sa algorithm na inirerekomenda sa jQuery FAQ

8594
07 окт. ang sagot ay ibinigay Tsvetomir Tsonev 07 oct. 2008-10-07 16:30 '08 at 4:30 pm 2008-10-07 16:30

Maaari mong gamitin ang hidden tagapili:

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

At visible tagapili:

 // Matches all elements that are visible $('element:visible') 
1318
07 окт. reply given twernt 07 Oktubre 2008-10-07 16:16 '08 at 4:16 pm 2008-10-07 16:16
 if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){ // element is hidden } 

Ang pamamaraan sa itaas ay hindi isinasaa>.is(":hidden") o .is(":visible") .

Halimbawa

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

Ang pamamaraan sa itaas ay ituturing ang div2 nakikita, at :visible hindi :visible . Ngunit ang nasa itaas ay maaaring maging kapaki-pakinabang sa maraming mga kaso, lalo na kapag kai>:visible ay hindi gumagana.

831
07 окт. sumagot na ibinigay kay Mote Oktubre 07. 2008-10-07 16:09 '08 at 4:09 pm 2008-10-07 16:09

Wala sa mga sagot na ito ang nauunawaan ko, at ito ang tanong na hinahanap ko: "Paano ko ipoproseso ang mga elemento na may visibility: hidden ?". Hindi rin :visible , ni :hidden ito, dahil pareho si>

 $(".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 ang sagot ay ibinigay ng aaronLile Marso 24 '11 sa 21:44 2011-03-24 21:44

Mula sa Paano matutukoy ang estado ng nakabukas na item?


Maaari mong matukoy kung ang isang elemento ay pinagsama o hindi ginagamit ang :visible at :hidden tagapili.

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

Kung kumilos ka lamang sa isang elemento batay sa hitsura nito, maaari mo lamang isama ang :visible o :hidden sa pagpapahayag ng selector. Halimbawa:

  $('#myDiv:visible').animate({left: '+=200px'}, 'slow'); 
343
14 янв. ang sagot ay ibinigay ng user574889 Ene 14 2011-01-14 00:13 '11 sa 0:13 2011-01-14 00:13

Kadalasan, sa pamamagitan ng pagsuri kung may nakikita o hindi, agad kang pupunta nang diretso at gumawa ng ibang bagay dito. Ginagawang madali ng jQuery chain.

Kaya, kung mayroon kang tagapili, at gusto mong magsagawa ng i>filter(":visible") o filter(":hidden") , at pagkatapos ay itali ito sa aksyon na nais mong kunin.

Kaya sa halip ng isang if , halimbawa:

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

O mas epektibo, ngunit mas pangit:

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

Maaari mong gawin ang lahat ng ito sa isang linya:

 $('#btnUpdate').filter(":visible").animate({ width: "toggle" }); 
253
25 июля '09 в 13:21 2009-07-25 13:21 ang sagot ay ibinigay Simon_Weaver Hulyo 25, '09 sa 13:21 2009-07-25 13:21

Tagapili :visible ayon sa dokumentong jQuery :

  • none display halaga sa CSS.
  • Ang mga ito ay mga elemento ng form na may type="hidden" .
  • Ang kani>
  • Nakatago ang elemento ng magu>

Mga item na may visibility: hidden o opacity: 0 ay itinuturing na nakikita, habang ang mga ito ay kumukulo pa rin sa puwang sa layout.

Ito ay kapaki-pakinabang sa i>display != none ), hindi papansin ang kakayahang makita ng mga elemento ng magu>.css("display") == 'none' nangyayari hindi lamang nang mas mabilis, ngunit nagbabalik din ang kawastuhan ng kakayahang makita.

Kung nais mong suriin ang visibility sa halip ng display, dapat mong gamitin ang:. .css("visibility") == "hidden" .

Tandaan din ang karagdagang mga tala ng jQuery :

Dahil :visible ang extension ng jQuery, at hindi bahagi ng pagtutukoy ng CSS, ang mga query gamit ang :visible ay hindi maaaring samantalahin ang mga pagpapabuti ng pagganap na ibinigay ng built-in na DOM querySelectorAll() paraan. Upang makamit ang pinakamahusay na pagganap kapag gumagamit ng :visible upang piliin ang mga elemento, piliin muna ang mga elemento gamit ang purong CSS selector, pagkatapos ay gamitin ang .filter(":visible") .

Gayundin, kung nag-aalala ka tungkol sa pagganap, dapat mong suriin ngayon na nakikita mo ako ... ipakita / itago ang pagganap (2010-05-04), at gumamit ng iba pang mga paraan upang ipakita at itago ang mga elemento.

206
25 нояб. Ang sagot ay ibinigay ni Pedro Rainho noong Nobyembre 25. 2011-11-25 12:16 '11 sa 12:16 2011-11-25 12:16

Ito ay gumagana para sa akin, at ginagamit ko ang show() at hide() upang gawing nakatago / nakikita ang aking div:

 if( $(this).css('display') == 'none' ){  } else {  } 
187
06 июля '11 в 23:19 2011-07-06 23:19 ang sagot ay ibinigay sa pamamagitan ng Abiy noong Hulyo 06 '11 sa 23:19 2011-07-06 23:19

Paano makita ang elemento at jQuery gumagana

Ang elemento ay maaaring maitago gamit ang display:none , visibility:hidden o opacity:0 . Ang pagkakaiba sa pagitan ng mga pamamaraan na ito:

  • display:none itinatago ang item at hindi sumasakop sa anumang espasyo;
  • visibility:hidden sa item, ngunit tumatagal pa rin ito ng espasyo sa layout;
  • opacity:0 itinatago ang item bi>

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

    Mga kapaki-pakinabang na paraan ng switch jQuery:

     $('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); }); 
181
25 апр. ang sagot ay ibinigay ng webvitaly Abril 25 2012-04-25 00:04 '12 sa 12:04 AM 2012-04-25 00:04

Gusto kong gumamit ng CSS class .hide { display: none!important; } .hide { display: none!important; } .

Upang itago / ipakita, tumawag ako .addClass("hide")/.removeClass("hide") . Upang suriin ang kakayahang makita, gagamitin ko. .hasClass("hide") .

Ito ay isang simple at tapat na paraan upang suriin / itago / ipakita ang mga item kung hindi mo balak na gamitin ang mga pamamaraan .toggle() o. .animate() .

145
03 февр. sagot na ibinigay ni Evgeny Levin Pebrero 03. 2012-02-03 19:04 '12 sa 19:04 2012-02-03 19:04

Maaari mo ring gawin ito gamit ang plain javascript:

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

Mga Tala:

  • Gumagana saan man

  • Gumagana para sa nested na mga item

  • Gumagana para sa CSS at inline na mga estilo.

  • Wa>

140
16 июля '12 в 22:18 2012-07-16 22:18 ang sagot ay ibinigay ni Matt Brock Hulyo 16, '12 sa 10:18 pm 2012-07-16 22:18

Maaari mo lamang gamitin ang katangiang hidden o visible , halimbawa:

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

O maaari mong gawing simple ang parehong bagay sa mga sumusunod.

 $(element).is(":visible") 
120
23 мая '12 в 15:59 2012-05-23 15:59 ang sagot ay ibinigay ScoRpion Mayo 23, '12 sa 3:59 pm 2012-05-23 15:59

Ang isa pang sagot ang kai>jQuery , ngunit sa halip na itago ito, tanggalin mo ang buong elemento, ngunit kopyahin mo ang HTML nito, at ang tag mismo sa variable jQuery, at pagkatapos kai>if (!$('#thetagname').length) .

110
22 апр. ang sagot ay ibinigay ng think123 Apr 22 2012-04-22 02:40 '12 sa 2:40 2012-04-22 02:40

Link ng demo

Pinagmulan:

Blogger Plug n Play - Mga Tool at Widget jQuery: Paano malaman kung ang isang item ay nakatago o nakikita gamit ang jQuery

105
25 янв. Sagot ay Code Spy Jan 25 2013-01-25 08:34 '13 sa 8:34 2013-01-25 08:34

ebdiv dapat itakda sa style="display:none;" Ito ay gumagana para sa parehong pagpapakita at pagtatago:

 $(document).ready(function(){ $("#eb").click(function(){ $("#ebdiv").toggle(); }); }); 
103
13 июня '12 в 16:20 2012-06-13 16:20 ang sagot ay ibinigay ng Vaishu noong Hunyo 13 '12 sa 4:20 pm 2012-06-13 16:20

Kapag sinusubok ang isang elemento na may :hidden tagapili sa jQuery, dapat itong isaa>isang elemento na may isang absolute na lokasyon ay maaaring makilala bi> .

Sa simula, ito tila medyo kontra-intuitive - bagaman isang mas malapitan na pagtingin sa dokumentong jQuery ay nagbibigay ng may-katuturang impormasyon:

Ang mga elemento ay maaaring ituring na nakatago para sa i>

Kaya talagang may katuturan ang tungkol sa kahon-modelo at estilo ng kinakalkula para sa elemento. Kahit na ang lapad at taas ay hindi malinaw na nakatakda sa 0, maaari si>

Tingnan ang sumusunod na halimbawa:

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

Ang parehong JS ay magkakaroon ng output na ito:

 console.log($('.foo').is(':hidden')); // false console.log($('.bar').is(':hidden')); // false 
85
06 мая '14 в 13:50 2014-05-06 13:50 ang sagot ay ibinigay konsepdeluxe Mayo 06 '14 sa 13:50 2014-05-06 13:50

Maaari itong magtrabaho:

 expect($("#message_div").css("display")).toBe("none"); 
82
20 июля '12 в 15:44 2012-07-20 15:44 ang sagot ay ibinigay ni Maneesh Kumar Hulyo 20, '12 sa 15:44 2012-07-20 15:44

Halimbawa:

 <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 окт. sagot na ibinigay ni Irfan DANISH Oktubre 28 2013-10-28 09:43 '13 sa 9:43 2013-10-28 09:43

Upang malaman kung hindi ito nakikita, gagamitin ko ! :

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

O kaya ang mga sumusunod: sam, pinapanatili ang jQuery selector sa isang variable upang magkaroon ng mas mahusay na pagganap kapag kai>

 var $book = $('#book') if(!$book.is(':visible')) { alert('#book is not visible') } 
61
04 июня '13 в 16:42 2013-06-04 16:42 ang sagot ay ibinigay ni Matthias Wegtun noong Hunyo 04 '13 sa 4:42 2013-06-04 16:42

Gamitin ang paglipat ng klase, hindi pag-edit ng estilo.,.

Ang paggamit ng mga klase na idinisenyo upang "itago" ang mga elemento ay simple pati na rin ang isa sa mga pinaka-epektibong pamamaraan. Ang paglipat ng klase 'nakatago' sa uri ng Display 'none' ay magiging mas mabilis kaysa sa direktang pag-edit ng estilo. Ipinaliwanag ko nang detalyado ang ilan sa mga tanong na ito sa tanong ng Pag-ikot ng dalawang elemento na nakikita / nakatago sa parehong div .


Mga Rekomendasyon at Optimization ng JavaScript

Narito ang isang tunay na nakapagtuturo video sa Google Tech Talk mula sa punong engineer ng Google na si Nicholas Zakas:

59
19 июля '13 в 0:17 2013-07-19 00:17 ang sagot ay binibigyan ng Lopsided Hulyo 19, '13 sa 0:17 2013-07-19 00:17

Isang halimbawa ng paggamit ng nakikitang tseke para sa isang yunit ng ad:

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

Ang "ablockercheck" ay isang tagatukoy na nag-bloke ng isang bloke. Samakatuwid, sa pamamagitan ng pagsuri nito, kung nakikita ito, maaari mong makita kung pinagana ang ad unit.

55
27 апр. ang sagot ay ibinigay Roman Losev 27 apr. 2015-04-27 10:57 '15 sa 10:57 2015-04-27 10:57

Sa wakas, wala sa mga halimbawa ang akma sa akin, kaya isinulat ko ang sarili ko.

Mga pagsusulit (wa>filter:alpha pagsuporta sa Internet Explorer filter:alpha ):

a) Suriin kung nakatago ang dokumento

b) Suriin kung ang sangkap ay may zero lapad / taas / opacity o display:none / visibility:hidden sa built-in na mga estilo.

c) Siguraduhin na ang sentro (din dahil mas mabilis ito kaysa sa pagsubok ng bawat pixel / corner) ng elemento ay hindi nakatago ng isa pang elemento (at lahat ng mga ninuno, halimbawa: overflow:hidden / scroll / isang elemento sa paglipas ng enother)

d) Suriin kung ang sangkap ay may zero lapad / taas / opacity o display:none / visibility: nakatago sa computed estilo (bukod sa lahat ng mga ninuno)

Sinubok

(Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Internet Explorer 5-11 na mga mode + Internet Explorer 8 sa isang virtual machine ), 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; } })(); 

Paano gamitin:

 is_visible(elem) // boolean 
55
09 апр. ang sagot ay ibinigay Aleko 09 apr. 2014-04-09 20:06 '14 sa 20:06 2014-04-09 20:06

Kai>

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

Kung susuriin namin ang $(this).is(":visible") , awtomatikong sinusuri ng jQuery ang parehong mga bagay.

50
31 янв. ang sagot ay ibinigay ng Premshankar Tiwari noong Enero 31 2014-01-31 09:24 '14 sa 9:24 ng 2014-01-31 09:24

Siguro maaari mong gawin ang isang bagay tulad nito.

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <input type="text" id="tElement" style="display:block;">Firstname</input> 
38
07 апр. sumagot na ibinigay ni Mathias Stavrou 07 Abr 2015-04-07 15:26 '15 sa 15:26 2015-04-07 15:26

Dahil Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (tulad ng inilarawan para sa jQuery: nakikita selector ) - maaari naming suriin kung ang elemento ay nakikita sa ganitong paraan:

 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 ang sagot ay ibinigay ni Andron Marso 19, '14 sa 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 нояб. ang sagot ay ibinigay ni Gaurav noong 15 nobyembre. 2013-11-15 13:41 '13 sa 13:41 2013-11-15 13:41

Ngunit paano kung ang CSS elemento ay ganito ang hitsura nito?

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

Kaya ito ang sagot sa tanong na stack overflow. Kung paano suriin kung ang isang item ay off screen ay dapat ding isaa>

30
23 авг. ang sagot ay ibinigay ng RN Kushwaha 23 aug. 2014-08-23 23:53 '14 sa 23:53 2014-08-23 23:53

Suriin lamang ang kakayahang makita sa pamamagitan ng pagsuri sa lohikal na halaga, halimbawa:

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

Ginamit ko ang code na ito para sa bawat function. Kung hindi, maaari mong gamitin is(':visible') upang suriin ang kakayahang makita ng elemento.

30
11 авг. ang sagot ay binibigyan ng pixellabme 11 aug. 2014-08-11 08:28 '14 sa 8:28 2014-08-11 08:28

Ang isang function ay maaaring malikha upang suriin ang mga katangian ng pagpapakita / display upang matukoy kung ang isang elemento ay ipinapakita sa user interface o hindi.

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

Paggawa ng script

29
29 авг. ang sagot ay ibinigay V31 29 aug. 2014-08-29 23:20 '14 sa 23:20 2014-08-29 23:20

Mayroon ding isang ternary kondisyon na expression upang suriin ang estado ng elemento, at pagkatapos ay upang ilipat ito:

 $('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); }); 
29
06 нояб. sumagot na ibinigay ng cssimsek Nobyembre. 2013-11-06 02:32 '13 sa 2:32 2013-11-06 02:32
  • 1
  • 2

Iba pang mga katanungan tungkol sa label o Magtanong ng isang katanungan