:hidden Seçicisi

hidden selector
Açıklama : Gizlenmiş tüm elemanları seçer.

jQuery( ":hidden" ) Eklendiği Versiyon 1.0

Elemanlar çeşitli sebeplerle hidden (gizli) olabilir.

  • CSS display değerleri none olabilir.
  • Form elemanı olup type="hidden" özniteliği olabilir.
  • Genişlik ve yükseklikleri tam sıfıra set edilmiş olabilir.
  • Ata elemanlarından biri hidden olduğu için o da görünemez.

Öznitelik değerleri visibility: hidden ve opacity: 0 olan elemanlar hala yerleşimde yer kapladığı için görünür kabul edilir. Elemanı gizleyen animasyonlarda animasyon bitene kadar eleman görünür olur.

Dökümanın içine eklenmemiş elemanlar görünür kabul edilmez, jQuery onların dökümana eklendiğinde görünür olup olamayacağını bilemez.

Bu seçici :visible seçicisinin tersidir. Bu yüzden :hidden ile seçilen elemanlar :visible ile seçilmeyenlerdir ya da tersi.

Gizli bir elemanın gösterilmesi için animasyon başladığı andan itibaren eleman görünür olur.

Versiyon 1.3.2 de :hidden nasıl tayin edilir değişti. Bir eleman eğer o ya da ebeveynlerinden biri sayfada ter kaplamıyorsa hidden kabul edilir. CSS özelliği visiblity sayılmaz (bu yüzden $(eleman).css("visibility", "hidden").is(":hidden") == false olur). release notes sayfasına bakabilirsiniz.

JQuery 3 :hidden (ve tabi ki :visible) seçicisinde küçük bir değişim yapıldı. Bu versiyondan itibaren yerleşim kutusu olmayan elemanlar :hidden kabul edilmedi. Örneğin <br> elemanları ve içeriği boş olan inline elemanlar :hidden seçicisi tarafından seçilmez.


İlave Notlar :

  • Bu :hidden seçicisi bir JQuery eklentisi olup standart CSS seçici olmadığı için, standart DOM querySelectorAll() metodunun performansında olamaz. Modern tarayıcılarda daha iyi performans için önce grup seçimini standart CSS ile yapıp .filter(":hidden"). metodu ile filtreleyiniz.
  • Bu seçiciyi sık kullanmak ciddi performans sorunu üretebilir, görünebilirliği test etmek için tarayıcıyı sayfayı tekrar yayınlamaya zorlayabilir. Elemanların görünürlüğünü örneğin class üzerinden takip etmeniz daha doğru olacaktır.


Örnekler:

Tüm görünmez <div> elemanları göster ve görünmez input elemanları say.

<style>
   div {
      width: 70px; height: 40px;
      background: #e7f;
      margin: 5px; float: left;
   }
   span {
      display: block; clear: left;
      color: red;
   }
   .starthidden { display: none; }
</style>
<span></span><div></div>
<div style="display:none;">Gizli!</div>
<div></div>
<div class="starthidden">Gizli!</div>
<div></div>
 
<form>
  <input type="hidden"><input type="hidden">
  <input type="hidden">
</form>
 
<span></span>
<script>
   // Bazı tarayıcılarda :hidden head, title, script, etc. içerir..
   var hiddenElements = $("body").find(":hidden").not("script");
   
   $("span").first().text("Found " + hiddenElements.length +
      " hidden elements total.");
   $("div:hidden").show( 3000 );
   $("span").last().text("Found " + $("input:hidden").length +
      " hidden inputs.");
</script>
Gizli!
Gizli!

.

.