Soru JQuery'de bir öğenin gizlenip gizlenmediğini nasıl kontrol edebilirim?


Bir elemanın görünürlüğünü, fonksiyonlarını kullanarak değiştirmek mümkündür. .hide(), .show() veya .toggle().

Bir elemanın görünüp görünmediğini nasıl test edersiniz?


6705
2017-10-07 13:03


Menşei


Tüm bunlardan sonra bile bahsetmeye değer. $(element).is(":visible") jQuery 1.4.4 için çalışır, ancak jQuery 1.3.2 için değil İnternet & nbsp; Explorer & nbsp; 8. Bu kullanılarak test edilebilir Tsvetomir Tsonev'in yardımcı test pasajı. Her birinin altında test etmek için jQuery sürümünü değiştirmeyi unutmayın. - Reuben
Bu farklı bir soru olsa da ilgili: stackoverflow.com/questions/17425543/... - Mark Schultheiss
Gizli tanımınız nedir? - fabspro


Cevaplar:


Soru tek bir öğeye atıfta bulunduğundan, 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"); 

İle aynı Twernt'ın önerisiancak tek bir öğeye uygulanır; ve o jQuery SSS'de önerilen algoritmaya uyuyor


8294
2017-10-07 13:30



Bu çözüm, visible=false ve display:none; Mote'un çözümü açıkça kodlayıcıları kontrol etmeye niyetliydi. display:none; (saklanmasından bahsetmek ve hangi kontrolü göstermek display:none değil visible=true) - kralco626
Bu doğru ama :visible Ayrıca, chiborg'un işaret ettiği gibi ana öğelerin görünür olup olmadığını da kontrol edecektir. - Tsvetomir Tsonev
Bir noktanız var - kodun sadece display özelliği. Asıl soru şu ki show() ve hide()ve onlar displayCevabım doğru. Bu arada IE7 ile çalışıyor, işte bir test snippet'i - jsfiddle.net/MWZss ; - Tsvetomir Tsonev
Aslında ters mantık kelimelerinin daha iyi olduğunu buldum:! $ ('Selector'). (': Gizli'); bazı sebeplerden dolayı. Denemeye değer. - Kzqai
İşte basit bir karşılaştırma testi () regexp'e karşı:jsperf.com/jquery-is-vs-regexp-for-css-visibility. Sonuç: eğer performansınız yoksa, regexp over is () (eğer () gerçek öğeye bakmadan önce tüm gizli düğümleri arar (). - Max Leske


Kullanabilirsiniz hidden seçici:

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

Ve visible seçici:

// Matches all elements that are visible
$('element:visible')

1264
2017-10-07 13:16



Dikkatli olun, bu sunumda iyi performansla ilgili bazı ipuçları var: addyosmani.com/jqprovenperformance - codecraig
21-28. Sayfalarda ne kadar yavaş gösterir: gizli veya: görünür diğer seçicilerle karşılaştırılır. Bunu işaretlediğiniz için teşekkürler. - Etienne Dupuis
Birkaç elemanla uğraşırken ve çok az şey devam ediyor - yani VAKALARIN VATANDAŞTIRICI VAST BÜYÜKLÜĞÜ - zaman meselesi gülünç derecede küçük bir endişe. Oh, hayır! 19 ms yerine 42 ms aldı! - vbullinger
Bu seçiciyi kullanarak öğeyi abartılıyorum. $ ('element: hidden') benim için her zaman doğrudur! - ZoomIn
@cwingrav Belgeleri yeniden okumak isteyebilirsiniz, gizli: tüm öğeler için geçerlidir. Form elemanları ile type="hidden" tetikleyebilecek sadece bir durumdur: gizli. Yükseklik ve genişlik içermeyen elemanlar, display: noneve gizli ataları olan öğeler de şu şekilde nitelendirilecektir: gizli. - Joshua Walsh


if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Yukarıdaki yöntem ebeveynin görünürlüğünü dikkate almaz. Ebeveyni de düşünmek için kullanmalısınız .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 dikkate alınacaktır div2 görünürken :visible değil. Ancak, yukarıdaki durumlarda, özellikle gizli üst öğede görünen hata div'larının bulunup bulunmadığını bulmanız gerektiğinde, bu tür durumlarda yararlı olabilir. :visible çalışmayacak.


784
2017-10-07 13:09



Bu sadece tek bir öğenin görüntüleme özelliğini kontrol eder. Görünen özellik, ana öğelerin görünürlüğünü de denetler. - chiborg
IE 8 ile test ederken benim için çalışan tek çözüm budur. - evanmcd
Bu benim sorunumun çözümü değil, yöntem, bir mülkiyete karşı bir problemi kontrol etmek için bir düzeltme tespit etmeme yardımcı oldu. - dchayka
@chiborg Evet, ama bazen istediğin şey bu ve "zeki" jQuery nasıl zor yoldan öğrenmek zorundaydım ... - Casey
Bu soruya cevap verir, soru tek bir unsur hakkındadır ve hide(), show() ve toggle() Ancak, fonksiyonların çoğu, zaten söyledikleri gibi, :visible ve :hidden sözde sınıfları. - Jimmy Knoot


Bu cevapların hiçbiri soruyu anladığım kadarıyla ilgilenmiyor, ben de aradığım şey buydu. "Sahip olan öğeleri nasıl ele alırım visibility: hidden?". ne :visible ne de :hidden Her ikisi de belgelere göre görüntüleme aradıkları için bunu halledecektir. Belirleyebileceğim kadarıyla, CSS görünürlüğünü ele alacak bir seçici yok. İşte ben onu nasıl çözdüm (standart jQuery seçicileri, daha yoğun bir sözdizimi olabilir):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

451
2018-03-24 18:44



Bu cevap işlemek için iyi visibility kelimenin tam anlamıyla, ama soru How you would test if an element has been hidden or shown using jQuery?. JQuery kullanımı şu anlama gelir: display özelliği. - MarioDS
İle öğeleri visibility: hidden veya opacity: 0 düzende boşluk tüketmeye devam ettikleri için görünür olarak kabul edilir. Görmek cevap ver Pedro Rainho ve jQuery belgeleri üzerinde :visible Seçici. - awe
Düğümün ebeveynlerini kontrol etmek için DOM'a geçmeniz gerekiyor, yoksa bu işe yaramaz. - vsync
.hide () ile öğesi gizlerseniz bu işe yaramaz. - user3197818


itibaren Geçişli bir öğenin durumunu nasıl belirleyebilirim?


Bir öğenin çöken olup olmadığını belirleyebilirsiniz. :visible ve :hidden seçiciler.

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

Görünürlüğüne dayalı bir öğe üzerinde hareket ediyorsanız, yalnızca ekleyebilirsiniz :visible veya :hidden seçici ifadede. Örneğin:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

322
2018-01-13 21:13



öğenin görünür pencereden uzağa taşındığında niçin hiçbir cevaptan bahsedilmediğini merak etme top:-1000px... sanırım bu bir uç durum - jazzcat


Çoğu zaman bir şeyin görünür olup olmadığını kontrol ederken, hemen ileriye doğru gidiyor ve bununla başka bir şey yapacaksınız. jQuery zincirleme bunu kolaylaştırır.

Dolayısıyla, bir seçiciniz varsa ve görünürde veya gizliyse yalnızca bir eylem gerçekleştirmek istiyorsanız, bunu kullanabilirsiniz. filter(":visible") veya filter(":hidden") onu almak istediğiniz eylemle zincirleyin.

Yani bir if deyim, bunun gibi:

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

Ya da daha verimli, ama daha çirkin:

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

Hepsini tek bir satırda yapabilirsin:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

236
2017-07-25 10:21



Örnekte kullanılan snippet'te DOM düğümünü ayıklamak için bir neden yok ve sonra tekrar tekrar bakmak zorunda. Bunu yapmak daha iyidir: var $ button = $ ('# btnUpdate'); Ve sonra If ifadelerinde sadece $ (button) yerine $ butonunu kullanın. JQuery nesnesini önbelleğe alma avantajı vardır. - LocalPCGuy
işte basit bir örnek jquerypot.com/... - Ketan Savaliya


:visible göre seçici jQuery belgeleri:

  • Onlar bir CSS var display değeri none.
  • Onlar form elemanları ile type="hidden".
  • Genişlikleri ve yüksekliği açıkça 0 olarak ayarlanmıştır.
  • Bir ata elemanı gizlidir, bu yüzden sayfada sayfa gösterilmez.

İle öğeleri visibility: hidden veya opacity: 0 düzende boşluk tüketmeye devam ettikleri için görünür olarak kabul edilir.

Bu, bazı durumlarda faydalıdır ve diğerlerinde yararsızdır, çünkü eğer öğenin görünür olup olmadığını kontrol etmek istersenizdisplay != none), ebeveynlerin görünürlüğünü göz ardı ederek, bunu göreceksiniz .css("display") == 'none' sadece daha hızlı değil, aynı zamanda görünürlük kontrolünü doğru bir şekilde döndürecektir.

Görünürlüğü ekran yerine kontrol etmek isterseniz, şunları kullanmalısınız: .css("visibility") == "hidden".

Ayrıca dikkate almak ek jQuery notları:

Çünkü :visible jQuery uzantısı ve CSS belirtiminin bir parçası değil, kullanarak sorguları :visible yerel DOM tarafından sağlanan performans artışından yararlanamaz querySelectorAll() yöntem. Kullanırken en iyi performansı elde etmek için :visible öğeleri seçmek için, önce saf CSS seçiciyi kullanarak öğeleri seçin, sonra kullanın .filter(":visible").

Ayrıca, performans konusunda endişeleriniz varsa, kontrol etmelisiniz Şimdi beni görüyorsun… göster / göster performans (2010-05-04). Ve öğeleri göstermek ve gizlemek için diğer yöntemleri kullanın.


188
2017-11-25 09:16





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

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

170
2017-07-06 20:19