Bir maddənin jQuery-də gizli olub-olmadığını yoxlamaq üçün necə?

Siz, .hide() , .toggle() və ya .toggle() maddə görünürlüğünü dəyişə bilərsiniz.

Bir maddə görünən və ya gizli olub-olmadığını necə sınayacaqsınız?

6967
07 окт. Philip Morton 07 oktyabr istədi . 2008-10-07 16:03 '08 at 4:03 pm 2008-10-07 16:03
@ 56 cavab
  • 1
  • 2

Sual bir elementə aid olduğundan, bu kod daha uyğun ola bilər:

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

Yeddinci təkliflə eyni, lakin bir elementə tətbiq olunur; və bu , jQuery SSS-də təklif edilən alqoritmaya cavab verir

8594
07 окт. Cavab verilir Tsvetomir Tsonev 07 oktyabr . 2008-10-07 16:30 '08 saat 16:30 'da 2008-10-07 16:30

hidden selektordan istifadə edə bilərsiniz:

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

visible selector:

 // Matches all elements that are visible $('element:visible') 
1318
07 окт. Cavab verildi 07 Oktyabr 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 } 

Yuxarıda göstərilən metod valideynlərin görünürlüğünü nəzərə almır. Bir valideynə baxmaq üçün .is(":hidden") və ya .is(":visible") istifadə etməlisiniz.

Məsələn,

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

Yuxarıda göstərilən üsul div2 görünən div2 müalicə div2:visible . Lakin yuxarıdakı bir çox hallarda faydalı ola bilər, xüsusilə gizli ana elementdə görünən hər hansı bir div hatası olub-olmadığını tapmaq lazımdır, çünki bu şərtlər altında :visible işləməyəcəkdir.

831
07 окт. Cavabına Oct 07 verildi . 2008-10-07 16:09 '08 at 4:09 pm 2008-10-07 16:09

Bu cavabların heç biri anladığım şeyə aiddir və bu aradığım sual: " visibility: hidden elementləri necə işləyirəm visibility: hidden ?". Nə də :visible , nə də :hidden bu işlə məşğul olmaz, çünki hər ikisi də sənədləşmənin xəritəsini axtarırlar. Mən deyə bilərəm ki, CSS görünüşünü idarə etmək üçün heç bir selektor yoxdur. İşdə necə həll edildim (standart jQuery seçiciləri, bəlkə də daha qısa bir sintaksis):

 $(".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 Cavab aaronLile tərəfindən verilir 24 Mart 2011 21:44 2011-03-24 21:44

Anahtarlamalı maddənin vəziyyətini necə müəyyənləşdirmək olar?


Bir elementin tərtib olunmadığını və ya istifadə etmədiyini təyin edə bilərsiniz :visible:hidden seçicilər.

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

Sadəcə, görünüşünə əsasən bir element üzərində hərəkət etsəniz, sadəcə daxil edə bilərsiniz :visible və ya :hidden selektor ifadə :hidden . Məsələn:

  $('#myDiv:visible').animate({left: '+=200px'}, 'slow'); 
343
14 янв. Cavab 14 yanvar tarixində user574889 tərəfindən verilmişdir 2011-01-14 00:13 '11 at 0:13 2011-01-14 00:13

Tez-tez, bir şeyin göründüyünü və ya yox olduğunu yoxlayaraq dərhal düz irəliləyəcəksiniz və başqa bir şey edərsiniz. JQuery zənciri asanlaşdırır.

Beləliklə, bir seçiciniz varsa və onda bir hərəkət etmək istəyirsinizsə, yalnız görünən və ya gizli olduğunda, filter(":visible") və ya filter(":hidden") istifadə edə bilərsiniz və sonra hərəkət etmək istədiyiniz.

Beləliklə bir if yerinə, məsələn:

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

Və ya daha təsirli, lakin daha çirkin:

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

Hamısını bir xəttdə edə bilərsiniz:

 $('#btnUpdate').filter(":visible").animate({ width: "toggle" }); 
253
25 июля '09 в 13:21 2009-07-25 13:21 Cavab Simon_Weaver 25 iyul '09 saat 13:21 'də verildi 2009-07-25 13:21

Selector :visible jQuery sənədlərinə görə :visible :

  • CSS dəyərinə none display none .
  • Bunlar type="hidden" olan elementlərdir.
  • Onların genişliyi və boyu açıq olaraq 0 olaraq təyin olunur.
  • Ana element gizlidir, belə ki element elementdə görünmür.

Görmə visibility: hidden olan maddələr visibility: hidden və ya opacity: 0 visibility: hidden nəzərə alınır, çünki onlar hələ də məkanda yer istifadə edirlər.

Bu, bəzi hallarda faydalıdır və başqaları üçün lazımsızdır, çünki bir elementin göründüyü yoxlanılmasını istəyirsə ( display != none ), Üst elementlərin görünüşünü görməməzlikdən .css("display") == 'none' bu .css("display") == 'none' yerinə yetirilməsini .css("display") == 'none' daha sürətli deyil, eyni zamanda görünürlüğün düzgünlüyünü də qaytarır.

Ekranın yerinə görünürlüğünü kontrol etmək istəyirsinizsə, istifadə edin: .css("visibility") == "hidden" .

Əlavə jQuery qeydlərini də qeyd edin :

Çünki :visible , jQuery-nin genişləndirilməsi və CSS spesifikasiyasının bir hissəsi deyil, istifadə edərək sorgular :visible daxili DOM querySelectorAll() metodu tərəfindən göstərilən performans təkmilləşdirmələrindən istifadə edə bilməz. Istifadə edərkən ən yaxşı performansı əldə etmək üçün :visible Elementləri seçmək üçün :visible , əvvəlcə təmiz CSS seçicisini istifadə edərək elementləri seçin, sonra istifadə edin .filter(":visible") .

Ayrıca, performansı narahat edirsinizsə, indi məni görürsünüz ... performansı göstər / gizləyin (2010-05-04) və elementləri göstərmək və gizlətmək üçün digər üsullardan istifadə edin.

206
25 нояб. Cavab 25 noyabrda Pedro Rainho tərəfindən verilir. 2011-11-25 12:16 '11 at 12:16 2011-11-25 12:16

Mənim üçün işləyir və mənim divu gizli və görünən etmək üçün show()hide() istifadə edirəm:

 if( $(this).css('display') == 'none' ){  } else {  } 
187
06 июля '11 в 23:19 2011-07-06 23:19 Cavab 06 iyul 'da 23:19' də Abiy tərəfindən verilmişdir 2011-07-06 23:19

Element görünürlük və jQuery işi necə

Element display:none gizlənə bilər display:none , visibility:hidden və ya opacity:0 . Bu üsullar arasındakı fərq:

  • display:none elementi gizlədir və hər hansı bir yer tutmur;
  • visibility:hidden maddə gizlədir, amma hələ də layout yerini alır;
  • opacity:0 maddə "görünən: gizli" olaraq gizlədir və hələ də yerdəki yer tutur; tək fərq ki, qeyri-şəffaflıq elementin qismən şəffaf olmasına imkan verir;

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

    Faydalı jQuery keçid üsulları:

     $('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); }); 
181
25 апр. Cavab webvitaly tərəfindən verilir Apr 25 2012-04-25 00:04 '12 at 12:04 AM 2012-04-25 00:04

CSS sinifindən istifadə .hide { display: none!important; } .hide { display: none!important; } .

Gizlətmək / göstərmək üçün, çağırıram .addClass("hide")/.removeClass("hide") . Görünürlüğünü yoxlamaq üçün, istifadə edirəm. .hasClass("hide") .

.toggle() və ya .animate() üsullarını istifadə etməyi planlaşdırmırsınızsa, bu, elementləri yoxlamaq / gizlətmək üçün sadə və sadə bir yoldur.

145
03 февр. Evgeny Levin tərəfindən verilmiş cavab 03 fevral. 2012-02-03 19:04 '12 at 19:04 2012-02-03 19:04

Bunu düz javascript istifadə edərək də edə bilərsiniz:

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

Qeydlər:

  • Hər yerdə çalışır

  • Daxili əşyalar üçün işləyir

  • CSS və inline üslubları üçün çalışır.

  • Çərçivə tələb olunmur

140
16 июля '12 в 22:18 2012-07-16 22:18 Cavab Matt Brock tərəfindən 16 iyul '12 'də saat 10:18' da veriləcək 2012-07-16 22:18

Siz sadəcə olaraq hidden və ya visible xüsusiyyətdən istifadə edə bilərsiniz, məsələn:

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

Və ya aşağıdakılarla eyni şeyi sadələşdirə bilərsiniz.

 $(element).is(":visible") 
120
23 мая '12 в 15:59 2012-05-23 15:59 Cavab 23 may 2012 -ci il saat 15: 59 -da ScoRpion -da verilir. 2012-05-23 15:59

Bir başqa cavabı nəzərə almalısan: bir elementi gizləsəniz , jQuery istifadə etməliyəm, amma onu gizlətmək yerinə bütün elementi silməklə, HTML- ni və etiketin özünü jQuery dəyişəninə kopyalasan və sonra siz mütləq istifadə edərkən if (!$('#thetagname').length) ekranda belə bir etiket varsa test etmək lazımdır.

110
22 апр. cavab 22 aprel 2012-04-22 02:40 '12 at 2:40 2012-04-22 02:40

Demo link

Mənbə:

Blogger Plug n Play - jQuery Tools və Widgets: Bir maddə gizli və ya jQuery

105
25 янв. Cavab Kod Spy Jan 25 2013-01-25 08:34 '13 at 8:34 2013-01-25 08:34

ebdiv style="display:none;" olaraq təyin edilməlidir. Həm də göstərmək və gizlətmək üçün çalışır:

 $(document).ready(function(){ $("#eb").click(function(){ $("#ebdiv").toggle(); }); }); 
103
13 июня '12 в 16:20 2012-06-13 16:20 cavab 13 iyun 2012-ci ildə saat 16 : 20- də Vaishu tərəfindən verilir. 2012-06-13 16:20

Elementi jQuery-də :hidden selektorla sınarkanda, mütləq yerə malik element elementləri görünsə də, gizli olaraq qəbul edilə bilər .

Əvvəla, bu birbaşa əksinə görünür - baxmayaraq jQuery sənədlərinə daha yaxından baxmaq müvafiq məlumatlar verir:

Elementlər bir neçə səbəbdən gizli hesab edilə bilər: [...] Onların genişliyi və boyu açıq olaraq təyin olunur. [...]

Beləliklə, boks-model və element üçün hesablanmış stil baxımından həqiqətən məna verir. Genişlik və hündürlüyü açıq olaraq 0 olaraq təyin edilərsə belə, onlar dolayısı ilə müəyyən edilə bilər.

Aşağıdakı nümunəyə baxın:

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

Eyni JS bu çıxışa sahib olacaq:

 console.log($('.foo').is(':hidden')); // false console.log($('.bar').is(':hidden')); // false 
85
06 мая '14 в 13:50 2014-05-06 13:50 Cavab conceptdeluxe may 06'14 'da 13:50 2014-05-06 13:50

Bu işləyə bilər:

 expect($("#message_div").css("display")).toBe("none"); 
82
20 июля '12 в 15:44 2012-07-20 15:44 Cavab Maneesh Kumar tərəfindən 20 İyul, '12 'də saat 15:44' da verilir 2012-07-20 15:44

Məsələn:

 <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 окт. İrfan DANISH tərəfindən cavabı 28 oktyabr 2013-10-28 09:43 '13 at 9:43 2013-10-28 09:43

Bu görünmür yoxsa yoxlamaq üçün istifadə edirəm ! :

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

Və ya aşağıdakılar: sam, jQuery seçicisini bir neçə dəfə ehtiyac duyduğunuzda daha yaxşı performansa malik olmaq üçün dəyişən saxlayır:

 var $book = $('#book') if(!$book.is(':visible')) { alert('#book is not visible') } 
61
04 июня '13 в 16:42 2013-06-04 16:42 Cavab Matthias Wegtun tərəfindən 04 İyun 2013 tarixində 4:42 2013-06-04 16:42 tarixində verilir

Sifariş keçid istifadə edin, stil tərtibatı deyil.

Elementləri "gizlətmək" üçün nəzərdə tutulan dərslərdən istifadə sadə və ən effektiv üsullardan biridir. Sınıfı 'gizli' tipinə keçid 'none' Display bu stilin birbaşa redaktə olunmasından daha sürətli olacaq. Eyni divda görünən / gizli olan iki elementin rotasiyası məsələsində bu sualların bir hissəsini ətraflı izah etmişəm.


JavaScript Tövsiyələri və Optimallaşdırma

Google-un baş mühəndisi Nicholas Zakas -dan Google Tech Talk-da həqiqətən təlimatlı video:

59
19 июля '13 в 0:17 2013-07-19 00:17 Cavab 19 İyul, '13 'də 0:17' da 2013-07-19 00:17 'də verildi

Bir reklam birliyi üçün görünən çekdən istifadə etmək nümunəsi:

 <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" bloku blok edən bir identifikatordur. Buna görə, bunu yoxlayaraq, görünsə, reklam birliyinin aktiv olub olmadığını aşkar edə bilərsiniz.

55
27 апр. Cavab Roman Losev 27 apr verilir. 2015-04-27 10:57 '15 at 10:57 2015-04-27 10:57

Sonda, nümunələrdən heç biri mənə uyğun deyil, mən özüm yazdım.

Testlər (Internet Explorer dəstəyi filter:alpha ):

a) Sənədin gizli olub olmadığını yoxlayın

b) elementin sıfır genişlik / hündürlük / şəffaflıq və ya display:none malik olmadığını yoxlayın display:none / visibility:hidden Daxili üslublarda visibility:hidden .

c) Elementin mərkəzinin (hər bir pixel / küncdən daha sürətli olması səbəbindən) digər bir element (və bütün atalar, məsələn, overflow:hidden / sürüşdürmək / bir elementi another üzərində) və ya kənar ekran

d) elementin sıfır genişlik / hündürlük / şəffaflıq və ya display:none malik olmadığını yoxlayın display:none / visibility: hesablanmış üslubda gizli (bütün atalar arasında)

Test edildi

Android 4.4 (öz browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Internet Explorer 5-11 rejimləri + Internet Explorer 8 virtual maşın ), 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; } })(); 

Necə istifadə olunur:

 is_visible(elem) // boolean 
55
09 апр. Cavab Aleko 09 apr verilir . 2014-04-09 20:06 '14 at 20:06 2014-04-09 20:06

Həm ikisini də yoxlamalısınız ... Həm də görünürlük göstərin:

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

$(this).is(":visible") yoxlayırıqsa, jQuery avtomatik olaraq hər iki şeyi yoxlayır.

50
31 янв. Cavab 31 yanvar tarixində Premshankar Tiwari tərəfindən verilir 2014-01-31 09:24 '14 'də saat 09:24 ' da 2014-01-31 09:24

Bəlkə belə bir şey edə bilərsiniz.

 <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 tərəfindən verilmiş cavab 07 Apr 2015-04-07 15:26 '15 'də 15:26' də, 2015-04-07 15:26

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout ( jQuery: görünən selektor üçün təsvir edildiyi kimi) elementin bu şəkildə göründüyünü yoxlaya bilərik:

 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 Cavab Andron tərəfindən verilir 19 Mart '14 'də 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 нояб. Cavab 15 dekabrda Gaurav tərəfindən verilir . 2013-11-15 13:41 '13 at 13:41 2013-11-15 13:41

Amma CSS elementi buna bənzəyir?

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

Beləliklə , yığma taşma sualına cavabdır. Bir maddə off ekran olub-olmadığını yoxlamaq üçün necə də nəzərə alınmalıdır.

30
23 авг. Cavab RN Kushwaha 23 avqustda verilir. 2014-08-23 23:53 '14 da 23:53 2014-08-23 23:53

Yalnız məntiqi dəyərini yoxlamaqla görünürlüğünü yoxlayın, məsələn:

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

Hər bir funksiya üçün bu kodu istifadə etdim. Əks halda istifadə edə bilərsiniz is(':visible') elementin görünüşünü yoxlamaq üçün.

30
11 авг. cavab pixellabme 11 aug verilir . 2014-08-11 08:28 '14 saat 08:28 2014-08-11 08:28

Görünüş / görünmə xüsusiyyətlərini yoxlamaq üçün bir funksiya yaradıla bilər ki, bir elementin istifadəçi interfeysində görüntülenip görüntülenmediğini müəyyən edin.

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

Çalışan script

29
29 авг. cavab V31 29 avqust verilir . 2014-08-29 23:20 '14 at 23:20 2014-08-29 23:20

Elementin vəziyyətini yoxlamaq üçün bir üçtərəfli şərti ifadə var və onu keçmək üçün:

 $('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); }); 
29
06 нояб. cssimsek tərəfindən verilmiş cavab 06 Noyabr. 2013-11-06 02:32 '13 at 2:32 2013-11-06 02:32
  • 1
  • 2

etiketləri ilə bağlı digər suallar və ya sual soruşun