Як праверыць, скрыты Ці элемент у jQuery?

Можна пераключыць бачнасць элемента, выкарыстоўваючы функцыі .hide() , .show() або .toggle() .

Як бы вы пратэставалі, калі элемент бачны альбо скрыты?

6967
07 окт. зададзены Philip Morton 07 каст. 2008-10-07 16:03 '08 у 16:03 2008-10-07 16:03
@ 56 адказаў
  • 1
  • 2

Паколькі пытанне ставіцца да аднаго элементу, гэты код можа быць больш прыдатным:

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

Тое ж самае, што і прапанова Твэнтэ , але ўжываецца да аднаго элементу; і гэта адпавядае алгарытме, рэкамендаванаму ў jQuery FAQ

8594
07 окт. адказ дадзены Tsvetomir Tsonev 07 каст. 2008-10-07 16:30 '08 а 16:30 2008-10-07 16:30

Вы можаце выкарыстоўваць селектар hidden :

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

І visible селектар:

 // Matches all elements that are visible $('element:visible') 
1318
07 окт. адказ дадзены twernt 07 каст. 2008-10-07 16:16 '08 у 16:16 2008-10-07 16:16
 if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){ // element is hidden } 

Вышэй метад не ўлічвае бачнасць з бацькоў. Каб разгледзець і аднаго з бацькоў, вы павінны выкарыстоўваць .is(":hidden") або .is(":visible") .

напрыклад,

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

Прыведзены вышэй метад будзе лічыць div2 бачным, а :visible няма. Але вышэйзгаданае можа быць карысна ў многіх выпадках, асабліва калі вам трэба высветліць, ці ёсць якія-небудзь памылкі div, бачныя ў схаваным бацькоўскай элеменце, таму што ў такіх умовах :visible не будзе працаваць.

831
07 окт. адказ дадзены Mote 07 каст. 2008-10-07 16:09 '08 у 16:09 2008-10-07 16:09

Ні адзін з гэтых адказаў не тычыцца таго, што я разумею, і гэта пытанне, які я шукаў: "Як апрацоўваць элементы з visibility: hidden ?". Ні :visible , ні :hidden не будуць апрацоўваць гэта, так як яны абодва шукаюць адлюстраванне ў дакументацыі. Наколькі я магу судзіць, няма селектара для апрацоўкі бачнасці CSS. Вось як я яго дазволіў (стандартныя селектара jQuery, можа быць больш сціснутае сінтаксіс):

 $(".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 адказ дадзены aaronLile 24 сакавіка '11 у 21:44 2011-03-24 21:44

З Як вызначыць стан пераключалых элемента?


Вы можаце вызначыць, скамплектаваць Ці элемент або няма, з дапамогай селектараў :visible і :hidden .

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

Калі вы проста воздействуете на элемент, заснаваны на яго бачнасці, вы можаце проста ўключыць :visible або :hidden ў выраз-селектар. напрыклад:

  $('#myDiv:visible').animate({left: '+=200px'}, 'slow'); 
343
14 янв. адказ дадзены user574889 14 студз. 2011-01-14 00:13 '11 у 0:13 2011-01-14 00:13

Часта, правяраючы, што-то мабыць ці не, вы неадкладна пойдзеце прама наперад і зробіце нешта яшчэ з ім. Ланцужок jQuery робіць гэта лёгка.

Такім чынам, калі ў вас ёсць селектар, і вы хочаце выканаць хоць нешта зрабілі на ім, толькі калі яно відно або ўтоена, вы можаце выкарыстоўваць filter(":visible") або filter(":hidden") , а затым прывязаць яго да дзеяння, якое вы хочаце распачаць.

Такім чынам, замест аператара if , напрыклад:

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

Ці больш эфектыўны, але нават больш пачварны:

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

Вы можаце зрабіць усё гэта ў адным радку:

 $('#btnUpdate').filter(":visible").animate({ width: "toggle" }); 
253
25 июля '09 в 13:21 2009-07-25 13:21 адказ дадзены Simon_Weaver 25 ліпеня '09 ў 13:21 2009-07-25 13:21

Селектар :visible ў адпаведнасці з дакументацыя jQuery :

  • У іх ёсць значэнне CSS display none .
  • Гэта элементы формы з type="hidden" .
  • Іх шырыня і вышыня відавочна устаноўлены на 0.
  • Элемент продка скрыты, таму элемент не адлюстроўваецца на старонцы.

Элементы з visibility: hidden або opacity: 0 лічацца бачнымі, паколькі яны ўсё яшчэ спажываюць прастору ў макеце.

Гэта карысна ў некаторых выпадках і бескарысна для іншых, таму што, калі вы хочаце праверыць, ці з'яўляецца элемент бачным ( display != none ), ігнаруючы бачнасць бацькоўскіх элементаў, вы выявіце, што выкананне .css("display") == 'none' адбываецца не толькі хутчэй, але і таксама верне правільнасць бачнасці.

Калі вы хочаце праверыць бачнасць замест адлюстравання, вы павінны выкарыстоўваць: .css("visibility") == "hidden" .

Таксама ўлічыце дадатковыя заўвагі jQuery :

Паколькі :visible з'яўляецца пашырэннем jQuery, а не часткай спецыфікацыі CSS, запыты з выкарыстаннем :visible не могуць скарыстацца павышэннем прадукцыйнасці, якія прадстаўляюцца убудаваным метадам DOM querySelectorAll() . Каб дамагчыся найлепшай прадукцыйнасці пры выкарыстанні :visible для выбару элементаў, спачатку выберыце элементы, выкарыстоўваючы чысты селектар CSS, затым выкарыстоўвайце .filter(":visible") .

Акрамя таго, калі вас турбуе прадукцыйнасць, вы павінны праверыць Цяпер вы бачыце мяне ... паказаць / схаваць прадукцыйнасць (2010-05-04), І выкарыстоўвайце іншыя метады для адлюстравання і ўтойвання элементаў.

206
25 нояб. адказ дадзены Pedro Rainho 25 лістапада. 2011-11-25 12:16 '11 у 12:16 2011-11-25 00:16

Гэта працуе для мяне, і я выкарыстоўваю show() і hide() , каб зрабіць мой div схаваным / бачным:

 if( $(this).css('display') == 'none' ){  } else {  } 
187
06 июля '11 в 23:19 2011-07-06 23:19 адказ дадзены Abiy 06 ліпеня '11 ў 23:19 2011-07-06 23:19

Як бачнасць элементаў і jQuery працуе

Элемент можа быць скрыты з дапамогай display:none , visibility:hidden або opacity:0 . Розніца паміж гэтымі метадамі:

  • display:none хавае элемент і не займае якое-небудзь прастора;
  • visibility:hidden хавае элемент, але ён па-ранейшаму займае месца ў макеце;
  • opacity:0 хавае элемент як "бачнасць: схаваны", і ён па-ранейшаму займае месца ў макеце; адзіная розніца заключаецца ў тым, што непразрыстасць дазваляе зрабіць элемент часткова празрыстым;

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

    Карысныя метады пераключэння jQuery:

     $('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); }); 
181
25 апр. адказ дадзены webvitaly 25 крас. 2012-04-25 00:04 '12 у 0:04 2012-04-25 00:04

Я б выкарыстаў Class CSS .hide { display: none!important; } .hide { display: none!important; } .

Каб схаваць / паказаць, я выклікаю .addClass("hide")/.removeClass("hide") . Для праверкі бачнасці я выкарыстоўваю .hasClass("hide") .

Гэта просты і зразумелы спосаб праверыць / схаваць / паказаць элементы, калі вы не плануеце выкарыстоўваць метады .toggle() або .animate() .

145
03 февр. адказ дадзены Evgeny Levin 03 февр. 2012-02-03 19:04 '12 у 19:04 2012-02-03 19:04

Вы таксама можаце зрабіць гэта, выкарыстоўваючы звычайны 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; } 

нататкі:

  • працуе ўсюды

  • Працуе для ўкладзеных элементаў

  • Працуе для CSS і ўбудаваных стыляў

  • Не патрабуецца фреймворк

140
16 июля '12 в 22:18 2012-07-16 22:18 адказ дадзены Matt Brock 16 ліпеня '12 а 22:18 2012-07-16 22:18

Можна проста выкарыстоўваць атрыбут hidden або visible , напрыклад:

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

Ці вы можаце спрасціць тое ж самае з дапамогай наступнага.

 $(element).is(":visible") 
120
23 мая '12 в 15:59 2012-05-23 15:59 адказ дадзены ScoRpion 23 мая '12 у 15:59 2012-05-23 15:59

Яшчэ адзін адказ, які вы павінны ўлічыць: калі вы хаваеце элемент, вы павінны выкарыстоўваць jQuery , але замест таго, каб хаваць яго, вы выдаляеце ўвесь элемент, але вы капіруеце яго HTML , а сам тэг у зменную jQuery, а затым усё, што вам трэба зрабіць з'яўляецца тэстам, калі на экране ёсць такі тэг, выкарыстоўваючы звычайны if (!$('#thetagname').length) .

110
22 апр. адказ дадзены think123 22 крас. 2012-04-22 02:40 '12 г у 2:40 2012-04-22 02:40

Дэма-спасылка

крыніца:

Blogger Plug n Play - Інструменты і віджэты jQuery: як даведацца, скрыты Ці элемент або бачны з дапамогай jQuery

105
25 янв. адказ дадзены Code Spy 25 студз. 2013-01-25 08:34 '13 у 08:34 2013/01/25 08:34

ebdiv павінна быць ўстаноўлена значэнне style="display:none;" , Гэта працуе як для паказу, так і для ўтойвання:

 $(document).ready(function(){ $("#eb").click(function(){ $("#ebdiv").toggle(); }); }); 
103
13 июня '12 в 16:20 2012-06-13 16:20 адказ дадзены Vaishu 13 чэрвеня '12 у 16:20 2012-06-13 16:20

Пры тэставанні элемента з селектарам :hidden ў jQuery варта ўлічваць, што элемент з абсалютным размяшчэннем можа быць распазнаны як схаваны, хоць іх даччыныя элементы бачныя.

Спачатку гэта здаецца некалькі супярэчным інтуіцыі - хоць больш пільны погляд на дакументацыю jQuery дае адпаведную інфармацыю:

Элементы можна лічыць ўтоенымі па некалькіх прычынах: [...] Іх шырыня і вышыня відавочна устаноўлены на 0. [...]

Такім чынам, гэта сапраўды мае сэнс у дачыненні да box-model і вылічанага стылю для элемента. Нават калі шырыня і вышыня не зададзены відавочна 0, яны могуць быць устаноўлены няяўна.

Паглядзіце на наступны прыклад:

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

Той жа JS будзе мець гэтая выснова:

 console.log($('.foo').is(':hidden')); // false console.log($('.bar').is(':hidden')); // false 
85
06 мая '14 в 13:50 2014-05-06 13:50 адказ дадзены conceptdeluxe 06 мая '14 у 13:50 2014/05/06 13:50

Гэта можа працаваць:

 expect($("#message_div").css("display")).toBe("none"); 
82
20 июля '12 в 15:44 2012-07-20 15:44 адказ дадзены Maneesh Kumar 20 ліпеня '12 ў 15:44 2012-07-20 15:44

прыклад:

 <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 окт. адказ дадзены Irfan DANISH 28 каст. 2013-10-28 09:43 '13 у 09:43 2013/10/28 09:43

Каб праверыць, ці не бачна гэта, я выкарыстоўваю ! :

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

Або наступнае: sam, захоўваючы селектар jQuery ў зменнай, каб мець лепшую прадукцыйнасць, калі вам гэта трэба некалькі разоў:

 var $book = $('#book') if(!$book.is(':visible')) { alert('#book is not visible') } 
61
04 июня '13 в 16:42 2013-06-04 16:42 адказ дадзены Matthias Wegtun 04 чэрвеня '13 у 16:42 2013/06/04 16:42

Выкарыстоўвайце пераключэнне класаў, а не рэдагаванне стылю.,.

Выкарыстанне класаў, прызначаных для "ўтойвання" элементаў, з'яўляецца простым, а таксама адным з найбольш эфектыўных метадаў. Пераключэнне класа 'hidden' з тыпам Display 'none' будзе выконвацца хутчэй, чым рэдагаванне гэтага стылю напрамую. Я падрабязна растлумачыў некаторыя з гэтых пытанняў у пытанні Паварот двух элементаў, бачных / схаваных у адным і тым жа div .


Рэкамендацыі і аптымізацыя JavaScript

Вось сапраўды павучальнага відэа ў Google Tech Talk ад галоўнага інжынера Google Нікаласа Закаса:

59
19 июля '13 в 0:17 2013-07-19 00:17 адказ дадзены Lopsided 19 ліпеня '13 ў 0:17 2013/07/19 00:17

Прыклад выкарыстання праверкі бачнай для рэкламнага блока:

 <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" - гэта ідэнтыфікатар, які блакуе блок. Таму, правяраючы гэта, калі ён бачны, вы можаце выявіць, ці ўключаны рэкламны блок.

55
27 апр. адказ дадзены Roman Losev 27 крас. 2015-04-27 10:57 '15 у 10:57 2015/04/27 10:57

У рэшце рэшт, ні адзін з прыкладаў ня падыходзіць мне, таму я напісаў свой уласны.

Тэсты (без падтрымкі Explorer Internet filter:alpha ):

a) Праверце, ці не скрыты Ці дакумент

b) Праверце, ці мае элемент нулявую шырыню / вышыню / непразрыстасць або display:none / visibility:hidden ў ўбудаваных стылях

c) Пераканайцеся, што цэнтр (таксама таму, што ён хутчэй, чым тэставанне кожнага пікселя / кута) элемента ня схаваны іншым элементам (і ўсімі продкамі, напрыклад: overflow:hidden / scroll / one element over enother) або экранам рэбры

d) Праверце, ці мае элемент нулявую шырыню / вышыню / непразрыстасць або display:none / бачнасць: схаваныя ў вылічаных стылях (сярод усіх продкаў)

пратэставана

Android 4.4 (уласны браўзэр / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (рэжымы Internet Explorer 5-11 + Internet Explorer 8 на віртуальнай машыне ), 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; } })(); 

Як выкарыстоўваць:

 is_visible(elem) // boolean 
55
09 апр. адказ дадзены Aleko 09 крас. 2014-04-09 20:06 '14 у 20:06 2014/04/09 20:06

Вам трэба праверыць абодва ... Адлюстроўваць, а таксама бачнасць:

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

Калі мы праверым $(this).is(":visible") , jQuery аўтаматычна правярае абедзве рэчы.

50
31 янв. адказ дадзены Premshankar Tiwari 31 студз. 2014-01-31 09:24 '14 у 09:24 2014/01/31 09:24

Можа быць, вы можаце зрабіць нешта накшталт гэтага

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <input type="text" id="tElement" style="display:block;">Firstname</input> 
38
07 апр. адказ дадзены Mathias Stavrou 07 крас. 2015-04-07 15:26 '15 у 15:26 2015/04/07 15:26

Таму што Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (як апісана для jQuery: бачны селектар ) - мы можам праверыць, ці сапраўды элемент бачны такім чынам:

 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 адказ дадзены Andron 19 сакавіка '14 у 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 нояб. адказ дадзены Gaurav 15 лістапада. 2013-11-15 13:41 '13 у 13:41 2013/11/15 13:41

Але што, калі элемент CSS выглядае наступным чынам?

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

So гэты адказ на пытанне аб перапаўненні стэка. Як праверыць, ці з'яўляецца элемент па-за экрана , таксама варта ўлічваць.

30
23 авг. адказ дадзены RN Kushwaha 23 жнів. 2014-08-23 23:53 '14 у 23:53 2014/08/23 23:53

Проста праверце бачнасць, праверыўшы лагічнае значэнне, напрыклад:

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

Я выкарыстаў гэты код для кожнай функцыі. У адваротным выпадку вы можаце выкарыстоўваць is(':visible') для праверкі бачнасці элемента.

30
11 авг. адказ дадзены pixellabme 11 жнів. 2014-08-11 08:28 '14 у 08:28 2014/08/11 08:28

Функцыя можа быць створана для праверкі атрыбутаў бачнасці / адлюстравання, каб вызначыць, адлюстроўваецца Ці элемент у карыстацкім інтэрфейсе ці не.

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

рабочая скрыпту

29
29 авг. адказ дадзены V31 29 жнів. 2014-08-29 23:20 '14 а 23:20 2014/08/29 23:20

Таксама тут маецца тернарное ўмоўнае выраз для праверкі стану элемента, а затым для яго пераключэння:

 $('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); }); 
29
06 нояб. адказ дадзены cssimsek 06 лістапада. 2013-11-06 02:32 '13 у 02:32 2013/11/06 02:32
  • 1
  • 2

Іншыя пытанні па пазнаках або Задайце пытанне