0Pricing
jQuery Academy · Pelajaran

Penyaringan Tingkat Lanjut dengan .filter()

Jelajahi kemampuan penuh metode .filter(), gunakan fungsi untuk menerapkan logika kustom dan memilih elemen berdasarkan properti atau hubungan yang dinamis.

Penyaringan Tingkat Lanjut dengan .filter() adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

Mempersempit Pemilihan dengan .filter()

Metode .filter() dalam jQuery merupakan cara yang andal untuk mempersempit sekumpulan elemen yang sudah dipilih. Metode ini membantu Anda mempertahankan hanya elemen yang memenuhi kriteria tertentu.

Anggaplah metode ini sebagai lapisan pemilihan kedua yang diterapkan setelah pemilihan awal untuk mendapatkan hasil yang lebih tepat.

Penyaringan Dasar dengan Selektor

Cara paling sederhana untuk menggunakan .filter() adalah dengan memberikan string selektor CSS. Cara ini bekerja seperti selektor standar, tetapi hanya diterapkan pada elemen yang sudah ada dalam kumpulan jQuery Anda saat ini.

Mari kita pilih semua div dengan kelas .item, lalu saring agar hanya elemen yang juga memiliki kelas .active yang dipertahankan.

<!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>

Logika Khusus dengan Fungsi

Kekuatan sebenarnya .filter() terlihat saat Anda meneruskan fungsi sebagai argumen. Dengan begitu, Anda dapat menerapkan logika yang sangat khusus dan dinamis pada setiap elemen dalam pemilihan Anda.

  • Fungsi dijalankan untuk setiap elemen dalam kumpulan jQuery saat ini.
  • Fungsi menerima dua argumen: index (posisi elemen dalam kumpulan) dan element (elemen DOM mentah).
  • Kembalikan true untuk mempertahankan elemen, dan false untuk menghapusnya dari kumpulan hasil penyaringan.

Menyaring Berdasarkan Posisi Indeks

Anda dapat menggunakan argumen index dalam fungsi penyaringan untuk memilih elemen berdasarkan posisinya dalam kumpulan jQuery saat ini. Ini berguna untuk tugas seperti memilih setiap item kedua atau rentang tertentu.

Mari kita pilih setiap item daftar kedua (yang memiliki indeks genap, dimulai dari 0) lalu menyorotnya.

<!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>

Berdasarkan Atribut dan Properti

Argumen element (atau $(this) di dalam fungsi) memungkinkan Anda memeriksa properti, atribut, atau isi teks setiap elemen DOM. Dengan demikian, penyaringan dapat dilakukan secara sangat spesifik.

Di sini, kita akan menemukan semua item daftar yang teksnya mengandung kata "Important" lalu membuatnya menjadi tebal.

<!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>

Penyaringan Dinamis dengan Data

Atribut data HTML5 (misalnya, data-status="active") sangat cocok untuk menyimpan informasi tambahan khusus aplikasi secara langsung pada elemen. Anda dapat menggunakan .filter() untuk memilih elemen berdasarkan nilai data khusus ini.

Mari kita menyorot item daftar yang ditandai sebagai 'complete' menggunakan atribut data-status.

<!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>

Menyaring Berdasarkan Anak atau Induk

Fungsi penyaringan Anda juga dapat memeriksa hubungan antar-elemen. Misalnya, Anda mungkin ingin memilih elemen induk yang berisi anak tertentu, atau sebaliknya.

Di sini, kita akan menemukan item daftar yang di dalamnya terdapat tag <img>, lalu menambahkan garis tepi.

<!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>

Penyaringan Rumit dengan Logika

Di dalam fungsi penyaringan, Anda dapat menggabungkan beberapa kondisi menggunakan operator logika JavaScript standar seperti && (AND) dan || (OR).

Dengan begitu, Anda dapat melakukan pemilihan yang sangat tepat berdasarkan beberapa kriteria sekaligus, sehingga penyaringan menjadi sangat andal:

  • Apakah elemen terlihat? AND apakah elemen memiliki kelas tertentu?
  • Apakah elemen berisi teks 'X'? OR apakah elemen memiliki atribut data 'Y'?

Penyaringan Dinamis di Dunia Nyata

Mari kita terapkan semua yang telah dipelajari. Bayangkan Anda sedang menyaring daftar produk berdasarkan beberapa kriteria. Fungsi penyaringan Anda dapat memeriksa beberapa kondisi secara dinamis.

Contoh ini menyorot produk yang terlihat AND termasuk dalam kategori 'electronics', menggunakan logika gabungan di dalam fungsi penyaringan.

<!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>

Tantangan Penyaringan

Diberikan HTML <li class="item special" data-value="10">...</li>, fungsi .filter() manakah yang dengan benar memilih hanya elemen <li> yang memiliki kelas .special AND data-value yang lebih besar dari 5?

Rangkuman: Kekuatan Penyaringan Dinamis

Sekarang Anda telah menguasai penggunaan lanjutan metode .filter() milik jQuery!

  • Metode ini mempersempit pemilihan yang sudah ada sehingga memberi kendali yang tepat.
  • Menggunakan fungsi memungkinkan logika penyaringan yang dinamis dan rumit.
  • Anda dapat memeriksa indeks, properti elemen, atribut data, dan hubungan antar-elemen.
  • Gabungkan beberapa kondisi dengan && (AND) dan || (OR) untuk mendapatkan kriteria yang sangat spesifik.

Metode yang andal ini memungkinkan Anda membuat antarmuka pengguna yang sangat responsif dan digerakkan oleh data.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penyaringan Tingkat Lanjut dengan .filter()” gratis?

Ya — teks lengkap “Penyaringan Tingkat Lanjut dengan .filter()” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Penyaringan Tingkat Lanjut dengan .filter()”?

Jelajahi kemampuan penuh metode .filter(), gunakan fungsi untuk menerapkan logika kustom dan memilih elemen berdasarkan properti atau hubungan yang dinamis. Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Penyaringan Tingkat Lanjut dengan .filter()” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Membangun Pemilih Semu Kustom
  2. Penyaringan Tingkat Lanjut dengan .filter()
  3. Mengecualikan Elemen dengan .not()
← Kembali ke jQuery Academy