jQuery Academy · Ders

.filter() ile Gelişmiş Filtreleme

Özel mantık uygulamak ve öğeleri dinamik özelliklere veya ilişkilere göre seçmek için işlevler kullanarak .filter() yönteminin tüm gücünü keşfedin.

.filter() ile Gelişmiş Filtreleme, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

.filter() ile Seçimleri Hassaslaştırma

jQuery'deki .filter() yöntemi, seçilmiş mevcut bir öğe kümesini daraltmanın güçlü bir yoludur. Yalnızca belirli ölçütlere uyan öğeleri tutmanıza yardımcı olur.

Bunu, ilk seçiminizden sonra uygulanan ve daha yüksek hassasiyet sağlayan ikinci bir seçim katmanı olarak düşünebilirsiniz.

Seçicilerle Temel Filtreleme

.filter() kullanmanın en basit yolu, bir CSS seçici dizesi sağlamaktır. Bu işlem standart bir seçici gibi çalışır; ancak yalnızca geçerli jQuery kümenizde zaten bulunan öğelere uygulanır.

Önce .item sınıfına sahip tüm div öğelerini seçelim, ardından bunları filtreleyerek aynı zamanda .active sınıfına sahip olanları tutalım.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <div class="item">Item 1</div>
  <div class="item active">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item active">Item 4</div>

  <script>
    $(document).ready(function(){
      // Select all divs with class 'item'
      var allItems = $('div.item');
      // Then filter to keep only those with class 'active'
      var activeItems = allItems.filter('.active');
      activeItems.css('color', 'blue');
    });
  </script>
</body>
</html>

Bir İşlevle Özel Mantık

.filter() yönteminin asıl gücü, bağımsız değişken olarak bir işlev aktardığınızda ortaya çıkar. Bu, seçiminizdeki her öğeye son derece özel ve dinamik bir mantık uygulamanızı sağlar.

İşlev, geçerli jQuery kümesindeki her öğe için çalıştırılır.
İki bağımsız değişken alır: index (öğenin kümedeki konumu) ve element (ham DOM öğesi).
Öğeyi tutmak için true, filtrelenen kümeden kaldırmak için false döndürün.

Dizin Konumuna Göre Filtreleme

Öğeleri geçerli jQuery kümesindeki konumlarına göre seçmek için filtre işlevinizdeki index bağımsız değişkenini kullanabilirsiniz. Bu, her ikinci öğeyi veya belirli aralıkları seçmek gibi görevler için kullanışlıdır.

Listedeki her ikinci öğeyi (0'dan başlayan çift dizinlileri) seçip vurgulayalım.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Item 0</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function(index) {
        // Keep items at even indices (0, 2, 4...)
        return index % 2 === 0;
      }).css('background-color', 'lightgreen');
    });
  </script>
</body>
</html>

Özniteliklere ve Özelliklere Göre

element bağımsız değişkeni (veya işlevin içindeki $(this)), her DOM öğesinin özelliklerini, özniteliklerini veya metin içeriğini incelemenize olanak tanır. Bu, son derece özel filtreleme yapabilmenizi sağlar.

Burada, metinlerinde "Important" sözcüğünü içeren tüm liste öğelerini bulup kalınlaştıracağız.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Property</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Task 1</li>
    <li>Important Task 2</li>
    <li>Task 3</li>
    <li>Another Important Task 4</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check if the text content includes "Important"
        return $(this).text().includes('Important');
      }).css('font-weight', 'bold');
    });
  </script>
</body>
</html>

Verilerle Dinamik Filtreleme

HTML5 data öznitelikleri (örneğin data-status="active"), uygulamaya özgü ek bilgileri doğrudan öğelerde depolamak için idealdir. Öğeleri bu özel veri değerlerine göre seçmek için .filter() kullanabilirsiniz.

data-status özniteliğini kullanarak 'complete' olarak işaretlenmiş liste öğelerini vurgulayalım.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li data-status="pending">Task A</li>
    <li data-status="complete">Task B</li>
    <li data-status="pending">Task C</li>
    <li data-status="complete">Task D</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check the 'data-status' attribute
        return $(this).data('status') === 'complete';
      }).css('text-decoration', 'line-through');
    });
  </script>
</body>
</html>

Alt veya Üst Öğeye Göre Filtreleme

Filtre işleviniz, öğeler arasındaki ilişkileri de inceleyebilir. Örneğin, belirli bir alt öğeyi içeren üst öğeleri veya bunun tersini seçmek isteyebilirsiniz.

Burada, içinde bir <img> etiketi bulunan liste öğelerini bulup bir kenarlık ekleyeceğiz.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Relationship</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Text only</li>
    <li>Item with <img src="https://placehold.co/16x16" alt="icon"></li>
    <li>Another text item</li>
    <li>Item with another <img src="https://placehold.co/16x16" alt="image"></li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check if the current <li> contains an <img>
        return $(this).find('img').length > 0;
      }).css('border', '2px solid orange');
    });
  </script>
</body>
</html>

Mantıkla Karmaşık Filtreler

Filtre işlevinizin içinde, standart JavaScript mantıksal işleçlerini kullanarak birden çok koşulu birleştirebilirsiniz: && (AND) ve || (OR).

Bu, aynı anda birden çok ölçüte dayalı son derece hassas seçimler yapmanızı sağlar ve filtrelemenizi çok güçlü hâle getirir:

Görünür mü? AND belirli bir sınıfa sahip mi?
'X' metnini içeriyor mu? OR 'Y' veri özniteliğine sahip mi?

Gerçek Dünya Senaryolarında Dinamik Filtreleme

Öğrendiklerimizi bir araya getirelim. Bir ürün listesini birden çok ölçüte göre filtrelediğinizi düşünün. Filtre işleviniz çeşitli koşulları dinamik olarak denetleyebilir.

Bu örnekte, birleştirilmiş mantığı filtre işlevinin içinde kullanarak hem görünür olan hem de 'electronics' kategorisine ait ürünler vurgulanır.

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Filtering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .hidden { display: none; }
</style>
</head>
<body>
  <div class="product" data-category="electronics">Laptop</div>
  <div class="product hidden" data-category="books">Novel</div>
  <div class="product" data-category="electronics">Mouse</div>
  <div class="product" data-category="books">Textbook</div>

  <script>
    $(document).ready(function(){
      $('div.product').filter(function() {
        // Filter products that are visible AND in 'electronics' category
        var isVisible = $(this).is(':visible');
        var isElectronics = $(this).data('category') === 'electronics';
        return isVisible && isElectronics;
      }).css('background-color', 'lightblue');
    });
  </script>
</body>
</html>

Filtreleme Görevi

<li class="item special" data-value="10">...</li> HTML'si verildiğinde, yalnızca .special sınıfına sahip VE data-value değeri 5'ten büyük olan <li> öğelerini doğru şekilde seçen .filter() işlevi hangisidir?

Özet: Dinamik Filtrelemenin Gücü

Artık jQuery'nin .filter() yönteminin ileri düzey kullanımlarında ustalaştınız!

Mevcut seçimleri hassaslaştırarak kesin denetim sağlar.
Bir işlev kullanmak, dinamik ve karmaşık filtreleme mantığının önünü açar.
Dizinleri, öğe özelliklerini, veri özniteliklerini ve ilişkileri inceleyebilirsiniz.
Son derece özel ölçütler için birden çok koşulu && (AND) ve || (OR) ile birleştirebilirsiniz.

Bu güçlü yöntem, son derece duyarlı ve veriye dayalı kullanıcı arayüzleri oluşturmanızı sağlar.

Sıkça Sorulan Sorular

“.filter() ile Gelişmiş Filtreleme” dersi ücretsiz mi?

Evet — “.filter() ile Gelişmiş Filtreleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“.filter() ile Gelişmiş Filtreleme” dersinde ne öğreneceğim?

Özel mantık uygulamak ve öğeleri dinamik özelliklere veya ilişkilere göre seçmek için işlevler kullanarak .filter() yönteminin tüm gücünü keşfedin. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.

“.filter() ile Gelişmiş Filtreleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← jQuery Academy Sayfasına Dön