.filter()

.filter( selector ) Dönen Değer : jQuery Nesnesi
Açıklama : Verilen fonksiyondaki kriteri karşılayacak şekilde seçili eleman setini filtreler.

.filter( selector ) Eklendiği Versiyon 1.0
selector
Tip : Seçici Deyim
Mevcut eleman setinin sorgulanacağı seçici string.
.filter( fonksiyon ) Eklendiği Versiyon 1.0
fonksiyon
Tip : Fonksiyon( Tamsayı index, Eleman eleman )
Mevcut eleman setinin her elemanına uygulanacak fonksiyon, this kelimesi o anki elemanı temsil eder.
.filter( elemanlar ) Eklendiği Versiyon 1.4
elemanlar
Tip : Elemanlar
Mevcut set elemanların bir ya da birçoğuyla eşleşen DOM eleman(lar)ı.
.filter( seçici ) Eklendiği Versiyon 1.4
seçici
Tip : jQuery
Mevcut set elemanların bir ya da birçoğuyla eşleşen jQuery nesnesi.


Bir set DOM elemanını içeren bir jQuery nesnesi verildiğinde, .filter() metodu eşleşen elemanlardan oluşan bir alt set geri döner. Verilen seçici kriterler her elemana uygulanır ve eşleşen elemanlar sonuç setinde yer alır.

Basit bir liste olan sayfa düşünelim:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>  

Liste elemanlarına bu metodu uygulayabiliriz.

$( "li" ).filter( ":nth-child(2n)" ).css( "background-color", "red" );
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6

Eşleşen 2, 4 ve 6. elemanların arka rengi değişecektir.


Fonksiyon kullanarak filtreleme

Metodun ikinci tekniği bize seçici deyim yerine fonksiyon kullanarak filtreleme imkanı sunar. Her eleman için verilen fonksiyon çalıştırıldığında true değer dönüyorsa o eleman sonuç setinde yer alır.

Diyelim biraz daha kapsamlı bir HTML kodumuz var.

<ul>
  <li><strong>list</strong> eleman 1 - bir tane strong tag</li>
  <li><strong>list</strong> eleman <strong>2</strong> -
    iki tane <span>strong tag</span></li>
  <li>list eleman 3</li>
  <li>list eleman 4</li>
  <li>list eleman 5</li>
  <li>list eleman 6</li>
</ul>

İçeriklerine göre elemanları filtrelemek için şöyle metod kullanabiliriz:

$( "li" )
  .filter(function( index ) {
    return $( "strong", this ).length === 1;
  })
    .css( "background-color", "red" );
  • list eleman 1 - bir tane strong tag
  • list eleman 2 - iki tane strong tag
  • list eleman 3
  • list eleman 4
  • list eleman 5
  • list eleman 6

Bu kod içinde sadece bir tane <strong> tag bulunduran "list eleman 1" elemanını seçecektir. Filtre fonksiyonu içinde this o anda fonksiyonun uygulandığı DOM elemanı temsil eder.

Ayrıca fonksiyon içerisinde filtre edilmeden önceki eleman setindeki elemanın sıfır temelli sıra numarasını da index değişkeninde kullanabiliriz.

$( "li" )
   .filter(function( index ) {
      return index % 3 === 2;
   })
   .css( "background-color", "red" );
  • list eleman 1 - bir tane strong tag
  • list eleman 2 - iki tane strong tag
  • list eleman 3
  • list eleman 4
  • list eleman 5
  • list eleman 6

Bu kod index değeri mod 3'e göre 2 kalanı veren 2 ve 5 index değerli elemanları seçecektir.

------------ TO DO ---------------

Örnekler:

.

.