Bir öğenin jQuery'de gizli olup olmadığı nasıl kontrol edilir?

.show() , .show() veya .toggle() kullanarak öğe görünürlüğünü değiştirebilirsiniz.

Bir öğenin görünür veya gizli olup olmadığını nasıl test edersiniz?

6967
07 окт. Philip Morton 07 Ekim istedi . 2008-10-07 16:03 '08, 04:03, 2008-10-07 16:03
@ 56 cevaplar
  • 1
  • 2

Soru bir elemente ait olduğu için bu kod daha uygun olabilir:

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

Yirmi önerisiyle aynı, ancak tek bir öğeye uygulandı; ve bu , jQuery SSS’inde önerilen algoritmaya karşılık gelir

8594
07 окт. Cevap Tsvetomir Tsonev 07 ekimde verildi . 2008-10-07 16:30 '08, 16:30, 2008-10-07, 16:30

hidden seçiciyi kullanabilirsiniz:

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

Ve visible seçici:

 // Matches all elements that are visible $('element:visible') 
1318
07 окт. Cevap verilen cevap twernt 07 Oct 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 } 

Yukarıdaki yöntem ebeveynin görünürlüğünü dikkate almaz. Bir ebeveyni görüntülemek için, .is(":hidden") veya .is(":visible") .

Örneğin

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

Yukarıdaki yöntem div2 görünür div2 edecektir ve :visible değil. Ancak yukarıdakiler, çoğu durumda, özellikle de gizli ana öğede görünen herhangi bir div hatası olup olmadığını öğrenmeniz gerektiğinde yararlı olabilir, çünkü bu koşullar altında :visible çalışmaz.

831
07 окт. Cevap Mote Ekim 07’de verilen cevap . 2008-10-07 16:09 '08, 04:09, 2008-10-07 16:09

Bu cevapların hiçbiri neyi anladığımı ilgilendirmiyor ve aradığım soru şuydu: "Öğeleri visibility: hidden nasıl işlerim visibility: hidden ?". Her ikisi de :visible veya nor :hidden , her ikisi de belgelerde eşleştirmeyi aradıkları için bu işlemle ilgilenmez. Söyleyebileceğim kadarıyla, CSS görünürlüğünü ele almak için bir seçici yok. İşte nasıl çözdüğüm (standart jQuery seçicileri, belki daha özlü bir sözdizimi):

 $(".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 Cevap aaronLile tarafından 24 Mart 11'de 21:44 2011-03-24 21:44 tarihinde verilmiştir.

Anahtarlanan öğenin durumu nasıl belirlenir?


Bir öğenin derlenip derlenmeyeceğini belirleyebilirsiniz :visible ve :hidden selectors.

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

Görünümüne dayalı bir öğeye basitçe bakarsanız, basitçe şunları yapabilirsiniz :visible seçici ifadesinde :hidden :visible veya :hidden . Örneğin:

  $('#myDiv:visible').animate({left: '+=200px'}, 'slow'); 
343
14 янв. Cevap user574889 tarafından verilmiştir 14 Oca 2011-01-14 00:13 '11 0:13 2011-01-14 00:13

Genellikle, bir şeyin görünür olup olmadığını kontrol ederek, hemen dümdüz gidersiniz ve onunla başka bir şey yaparsınız. JQuery zinciri bunu kolaylaştırıyor.

Bu nedenle, bir seçiciniz varsa ve üzerinde bazı işlemler yapmak istiyorsanız, yalnızca görünür veya gizliyse, filter(":visible") veya filter(":hidden") ve sonra yapmak istediğiniz işlemi yapın.

Yani bir if yerine, örneğin:

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

Ya da daha etkili, ama daha da çirkin:

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

Hepsini bir satırda yapabilirsiniz:

 $('#btnUpdate').filter(":visible").animate({ width: "toggle" }); 
253
25 июля '09 в 13:21 2009-07-25 13:21 Cevap Simon_Weaver 25 Temmuz '09 da 13:21 de verildi 2009-07-25 13:21

Seçici :visible jQuery belgelerine göre :visible :

  • CSS değeri display none .
  • Bunlar type="hidden" olan elemanlardır.
  • Genişlikleri ve yükseklikleri açıkça 0 olarak ayarlanmıştır.
  • Üst öğe gizlenir, böylece öğe sayfada gösterilmez.

visibility: hidden öğeler visibility: hidden veya opacity: 0 , düzende hala yer harcadıkları için görünür olarak kabul edilir.

Bu, bazı durumlarda yararlı ve diğerleri için kullanışsızdır, çünkü bir öğenin görünür olup olmadığını kontrol etmek istiyorsanız ( display != none ), ana öğelerin görünürlüğünü göz ardı ederek, .css("display") == 'none' bulacaksınız. .css("display") == 'none' sadece daha hızlı gerçekleşmekle kalmaz, aynı zamanda görünürlük doğruluğunu da verir.

Ekran yerine görünürlüğü kontrol etmek istiyorsanız, kullanmanız gerekenler: .css("visibility") == "hidden" .

Ayrıca ek jQuery notlarını not edin:

Çünkü :visible , jQuery'nin bir uzantısıdır ve CSS belirtiminin bir parçası değildir, aşağıdaki sorguları kullanır :visible , yerleşik DOM querySelectorAll() yönteminin sağladığı performans iyileştirmelerinden yararlanamaz. Kullanırken en iyi performansı elde etmek için :visible elemanları seçmek için :visible , önce saf CSS seçiciyi kullanarak elemanları seçin, sonra .filter(":visible") .

Ayrıca, performans konusunda endişeleniyorsanız, şimdi beni gördüğümü kontrol etmelisiniz ... performansı göster / gizle (2010-05-04) ve öğeleri görüntülemek ve gizlemek için diğer yöntemleri kullanın.

206
25 нояб. Cevap 25 Kasım'da Pedro Rainho tarafından verildi. 2011-11-25 12:16 '11 12:16 2011-11-25 12:16

Benim için çalışıyor ve div'mi gizli / görünür yapmak için show() ve hide() işlevini kullanıyorum:

 if( $(this).css('display') == 'none' ){  } else {  } 
187
06 июля '11 в 23:19 2011-07-06 23:19 Cevap Abiy tarafından 06 Temmuz 11'de 23:19 2011-07-06 23:19 tarihinde verilmiştir.

Öğe görünürlüğü ve jQuery nasıl çalışır?

Öğe, display:none kullanarak gizlenebilir display:none , visibility:hidden veya opacity:0 . Bu yöntemler arasındaki fark:

  • display:none öğeyi gizlemez ve herhangi bir yer kaplamaz;
  • visibility:hidden öğeyi gizler, ancak yine de düzende yer kaplar;
  • opacity:0 , öğeyi "visible: hidden" olarak gizler ve düzende hala yer kaplar; tek fark opaklığın elementin kısmen şeffaf olmasına izin vermesidir;

     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 anahtar yöntemleri:

     $('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); }); 
181
25 апр. Cevap webvitaly tarafından verildi 25 Nis 2012-04-25 00:04 '12 12:04, 2012-04-25 00:04

CSS sınıfını kullanırdım .hide { display: none!important; } .hide { display: none!important; } .

Gizlemek / göstermek için .addClass("hide")/.removeClass("hide") . Görünürlüğü kontrol etmek için, .hasClass("hide") .

Bu, .toggle() veya .animate() yöntemlerini kullanmayı düşünmüyorsanız, öğeleri kontrol etmek / gizlemek / göstermek için basit ve anlaşılır bir yoldur.

145
03 февр. Evgeny Levin tarafından verilen cevap 03 Şub. 2012-02-03 19:04 '12, 19:04 2012-02-03 19:04

Bunu düz javascript kullanarak da yapabilirsiniz:

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

Açıklamalar:

  • Her yerde çalışır

  • İç içe geçmiş öğeler için çalışıyor

  • CSS ve satır içi stilleri için çalışır.

  • Çerçeve gerekli

140
16 июля '12 в 22:18 2012-07-16 22:18 Cevap Matt Brock tarafından 16 Temmuz '12'de 10:18 de verilmiştir. 2012-07-16 22:18

Örneğin hidden veya visible niteliği kullanabilirsiniz, örneğin:

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

Veya aşağıdakilerle aynı şeyi basitleştirebilirsiniz.

 $(element).is(":visible") 
120
23 мая '12 в 15:59 2012-05-23 15:59 Cevap, ScoRpion 23 Mayıs '12' de öğleden sonra 3:59 ' da verildi 2012-05-23 15:59

Dikkate almanız gereken başka bir cevap: eğer bir öğeyi gizlerseniz, jQuery kullanmanız gerekir, ancak onu gizlemek yerine tüm öğeyi silersiniz, ancak HTML'sini ve etiketin kendisini jQuery değişkenine kopyalarsınız ve sonra Yapmanız gereken, ekranda normal bir if (!$('#thetagname').length) kullanarak böyle bir etiket olup olmadığını test etmek.

110
22 апр. Cevap think123 tarafından verildi Nis 22 2012-04-22 02:40 '12, 02:40 2012-04-22 02:40

Demo bağlantısı

Kaynak:

Blogger Plug n Play - jQuery Araçlar ve Widget'lar: Bir öğenin jQuery kullanılarak gizli veya görünür olup olmadığını nasıl anlarım?

105
25 янв. Cevap Kod Spy 25 Ocak 2013-01-25 08:34 '13 8:34 2013-01-25 08:34

ebdiv , style="display:none;" olarak ayarlanmalıdır. Bu, hem gösterme hem de gizlenme için çalışır:

 $(document).ready(function(){ $("#eb").click(function(){ $("#ebdiv").toggle(); }); }); 
103
13 июня '12 в 16:20 2012-06-13 16:20 Cevap Vaishu tarafından 13 Haziran 12:20 de 04:20 2012-06-13 16:20

JQuery'de bir :hidden seçicili bir öğeyi test ederken , alt öğeleri görünür olsa da, mutlak konuma sahip bir öğenin gizli olarak tanınabileceği göz önünde bulundurulmalıdır.

İlk başta, bu biraz sezgisel görünmektedir - jQuery belgelerine daha yakından bakmakla birlikte ilgili bilgiler sağlar:

Öğeler çeşitli nedenlerle gizli olarak kabul edilebilir: [...] Genişlikleri ve yükseklikleri açıkça 0 olarak ayarlanmıştır. [...]

Bu yüzden kutu modeline ve eleman için hesaplanan stile anlam ifade ediyor. Genişlik ve yükseklik açıkça 0 olarak ayarlanmamış olsa bile, örtük olarak ayarlanabilir.

Aşağıdaki örneğe bakı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/ 

Aynı JS bu çıktıya sahip olacak:

 console.log($('.foo').is(':hidden')); // false console.log($('.bar').is(':hidden')); // false 
85
06 мая '14 в 13:50 2014-05-06 13:50 Cevap kavramsal olarak verilmiş olup 06.06.2016 14:50 2014-05-06 13:50

İşe yarayabilir:

 expect($("#message_div").css("display")).toBe("none"); 
82
20 июля '12 в 15:44 2012-07-20 15:44 Cevap, Maneesh Kumar tarafından 20 Temmuz, 12'de 15:44 2012-07-20 15:44 tarihinde verilmiştir.

örnek:

 <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 окт. Cevap Irfan DANISH tarafından 28 Ekim 2013-10-28 09:43 '13, 09:43 2013-10-28 09:43

Bunun görünür olup olmadığını kontrol etmek için kullanıyorum ! :

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

Ya da aşağıdakileri yapın: sam, birkaç kez ihtiyacınız olduğunda daha iyi performans elde etmek için jQuery seçiciyi değişkende tutarak:

 var $book = $('#book') if(!$book.is(':visible')) { alert('#book is not visible') } 
61
04 июня '13 в 16:42 2013-06-04 16:42 Cevap, 04 Haziran 13 : Matthias Wegtun tarafından 4:42 2013-06-04 16:42 tarihinde verilmiştir.

Stil düzenlemeyi değil, sınıf geçişini kullanın.

Öğeleri "gizlemek" için tasarlanmış sınıfları kullanmak, en etkili yöntemlerden biri kadar basittir. 'Gizli' sınıfını Display 'none' türüyle değiştirmek bu stili doğrudan düzenlemekten daha hızlı olacaktır. Bu soruların bazılarını aynı div içinde görünür / gizlenmiş iki elementin dönmesi sorusuyla ayrıntılı olarak açıkladım.


JavaScript Önerileri ve Optimizasyonu

İşte Google’ın baş mühendisinden Nicholas Zakas’tan Google Tech Talk’la ilgili gerçekten öğretici bir video:

59
19 июля '13 в 0:17 2013-07-19 00:17 Cevap, Lopsided 19 Temmuz ' 13'te 0:17 2013-07-19 00:17 tarihinde verilmiştir.

Bir reklam birimi için görünen kontrolü kullanmaya örnek:

 <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" bir bloğu bloke eden bir tanımlayıcıdır. Bu nedenle, bunu kontrol ederek, eğer görünürse, reklam biriminin etkin olup olmadığını tespit edebilirsiniz.

55
27 апр. Cevap Roman Losev 27 nisan verildi . 2015-04-27 10:57 '15, 10:57 2015-04-27 10:57

Sonunda hiçbir örnek bana uymuyor, ben de kendim yazdım.

Testler (Internet Explorer destek filter:alpha olmadan filter:alpha ):

a) Belgenin gizli olup olmadığını kontrol edin

b) Elemanın sıfır genişlik / yükseklik / opaklık veya display:none olup olmadığını kontrol edin display:none / visibility:hidden yerleşik stillerde visibility:hidden .

c) Elemanın merkezinin (ayrıca her piksel / köşeyi test etmekten daha hızlı olduğu için) başka bir element (ve tüm atalar, örneğin: overflow:hidden / kaydırma / enother üzerindeki bir eleman) veya kenar ekran tarafından gizlenmediğinden emin olun.

d) Elemanın sıfır genişlik / yükseklik / opaklık veya display:none olup olmadığını kontrol edin display:none / görünürlük: hesaplanan stillerde gizli (tüm atalar arasında)

test edilmiş

Sanal makinede Android 4.4 (kendi tarayıcınız / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Internet Explorer 5-11 modları + 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; } })(); 

Nasıl kullanılır:

 is_visible(elem) // boolean 
55
09 апр. Cevap Aleko 09 nisan. 2014-04-09 20:06 '14, 20:06 2014-04-09 20:06

Her ikisini de kontrol etmeniz gerekiyor ... Görünüşün yanı sıra ekran:

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

$(this).is(":visible") , jQuery otomatik olarak her iki şeyi de denetler.

50
31 янв. Cevap 31 Ocak'ta Premshankar Tiwari tarafından verildi. 2014-01-31 09:24 '14, 09:24, 2014-01-31 09:24

Belki böyle bir şey yapabilirsin.

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <input type="text" id="tElement" style="display:block;">Firstname</input> 
38
07 апр. Cevap. cevap Mathias Stavrou 07 Nis 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: visible selector için açıklandığı gibi) - öğenin şu şekilde görünür olup olmadığını kontrol edebiliriz:

 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 Cevap, Andron tarafından 19.03.14'te 15:42 tarihinde yapılmıştır 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 нояб. Cevap Gaurav tarafından 15 Kasım'da verildi . 2013-11-15 13:41 '13 13:41 2013-11-15 13:41

Peki ya CSS elemanı böyle görünüyorsa?

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

Yani bu yığın taşması sorusunun cevabı. Bir öğenin ekran dışı olup olmadığı nasıl kontrol edilir de dikkate alınmalıdır.

30
23 авг. Cevap RN Kushwaha 23 Ağustos tarafından verilmiştir . 2014-08-23 23:53 '14 23:53 2014-08-23 23:53

Mantıksal değeri kontrol ederek görünürlüğü kontrol edin, örneğin:

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

Her fonksiyon için bu kodu kullandım. Aksi takdirde, öğenin görünürlüğünü kontrol etmek için kullanabilirsiniz is(':visible') .

30
11 авг. Cevap pixellabme 11 ağustosta verilir . 2014-08-11 08:28 '14 8:28 2014-08-11 08:28

Bir elemanın kullanıcı arayüzünde gösterilip gösterilmeyeceğini belirlemek için görünürlük / görüntüleme niteliklerini kontrol etmek için bir fonksiyon yaratılabilir.

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

Çalışma betiği

29
29 авг. Cevap V31 29 Ağustos'ta verilmiştir . 2014-08-29 23:20 '14 23:20 2014-08-29 23:20

Ayrıca, öğenin durumunu kontrol etmek ve sonra değiştirmek için üçlü bir koşullu ifade vardır:

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

Diğer etiketleri etiketleri veya bir soru sorun