jQuery Gezinti - filter() Metodu

jQuery Tarama Geçiş Kılavuzu

Örnek

Tüm div'lerin rengini değiştir ve "middle" adlı sınıfa çerçeve ekle:

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

Kişisel olarak deneyin

Tanım ve Kullanım

filter() yöntemi, element koleksiyonunu belirli bir seçiciye uygun olan elementlere indirir.

Sözdizimi

.filter(selector)
Parametre Tanım
selector Match edecek mevcut element koleksiyonunu belirleyen seçici ifadesi içeren bir dizi karakter.

Ayrıntılı Açıklama

Bir jQuery nesnesi, DOM element koleksiyonunu temsil eden .filter() yöntemi, yeni bir jQuery nesnesi oluşturmak için seçiciye uygun elementlerin alt kümelerini kullanır. Kullanılan seçici her elementi test eder; seçiciye uygun olan tüm elementler sonuçta içerilir.

Aşağıdaki basit bir listeye sahip olan bir sayfanın altını çizin:

<ul>
  <li>listeleme madde 1</li>
  <li>listeleme madde 2</li>
  <li>listeleme madde 3</li>
  <li>listeleme madde 4</li>
  <li>listeleme madde 5</li>
  <li>listeleme madde 6</li>
</ul>

Bu liste maddeleri koleksiyonuna bu yöntemi uygulayabiliriz:

$('li').filter(':even').css('background-color', 'red');

Kişisel olarak deneyin

Bu çağrının sonucu, 1, 3, 5 numaralı projelerin arka planını kırmızıya ayarlama işlemidir, çünkü hepsi seçiciye uygundur (hatırlayın, :even ve :odd 0 bazlı index kullanır).

Filtreleme fonksiyonu

Bu yöntemin ikinci formu, elementleri filtrelemek için fonksiyon yerine seçici kullanmaktır. Her element için, fonksiyon true döndüğü takdirde element, filtrelenmiş koleksiyona dahil edilir; aksi takdirde bu element dışlanır.

Aşağıdaki biraz daha karmaşık HTML parçasına göz atın:

<ul>
  <li><strong>listeleme</strong> madde 1 - bir strong etiketi</li>
  <li><strong>listeleme</strong> madde <strong>2</strong>
   - iki <span>strong etiketi</span></li>
  <li>listeleme madde 3</li>
  <li>listeleme madde 4</li>
  <li>listeleme madde 5</li>
  <li>listeleme madde 6</li>
</ul>

Bu listeleme maddelerini seçebilir ve içeriklerine göre filtreleyebiliriz:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

jQuery Tarama Geçiş Kılavuzu