0Pricing
jQuery Academy · Pelajaran

Mengecualikan Elemen dengan .not()

Kuasai metode .not() untuk mengecualikan elemen tertentu secara tepat dari sekumpulan elemen yang cocok, menyempurnakan pemilihan, dan mencegah operasi yang tidak diinginkan pada elemen tertentu.

Mengecualikan Elemen dengan .not() adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Pengantar .not()

Selamat datang! Dalam pelajaran ini, kita akan menguasai metode .not() jQuery yang andal. Metode ini penting untuk menyempurnakan pemilihan elemen Anda.

Metode .not() memungkinkan Anda mengecualikan elemen tertentu dari sekumpulan elemen yang cocok, sehingga Anda dapat mengendalikan dengan tepat elemen mana yang terpengaruh oleh operasi Anda.

Mengecualikan Berdasarkan String Selektor

Cara yang paling umum untuk menggunakan .not() adalah dengan meneruskan string selektor CSS. jQuery kemudian akan menghapus dari pemilihan saat ini setiap elemen yang cocok dengan selektor baru tersebut.

  • Pilih secara luas terlebih dahulu.
  • Kemudian, gunakan .not() untuk menyaring elemen yang tidak diinginkan.

Ini berguna ketika lebih mudah memilih 'semuanya', lalu menentukan apa yang ingin 'dihapus'.

.not() dengan Selektor Kelas

Coba contoh ini. Kita akan memilih semua elemen div, lalu menggunakan .not() untuk mengecualikan elemen yang memiliki kelas .special. Hanya div yang bukan khusus yang akan diberi gaya.

<!DOCTYPE html>
<html>
<head>
<style>
  .red { color: red; }
</style>
</head>
<body>
  <div class="box">Item 1</div>
  <div class="box special">Item 2</div>
  <div class="box">Item 3</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all .box divs, then exclude the one with .special
      $('.box').not('.special').addClass('red');
    });
  </script>
</body>
</html>

Mengecualikan Elemen Tertentu

Selain string selektor, Anda juga dapat meneruskan elemen DOM atau objek jQuery secara langsung ke .not().

Ini berguna ketika Anda sudah memiliki referensi ke elemen tertentu (atau beberapa elemen) yang ingin dikecualikan dari pemilihan saat ini.

.not() dengan Referensi Elemen

Dalam contoh ini, kita memilih semua item daftar (<li>). Kemudian, kita mengidentifikasi item tertentu berdasarkan ID-nya (#item2) dan menggunakan .not() untuk mengecualikannya dari operasi pemberian gaya.

<!DOCTYPE html>
<html>
<head>
<style>
  .bold { font-weight: bold; }
</style>
</head>
<body>
  <ul>
    <li>List Item 1</li>
    <li id="item2">List Item 2</li>
    <li>List Item 3</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all <li>, then exclude the specific #item2
      $('li').not($('#item2')).addClass('bold');
    });
  </script>
</body>
</html>

Pengecualian Khusus dengan Fungsi

Untuk logika pengecualian yang sangat dinamis atau rumit, Anda dapat meneruskan fungsi ke .not().

  • Fungsi dijalankan untuk setiap elemen dalam kumpulan saat ini.
  • Jika fungsi mengembalikan true, elemen tersebut akan dikecualikan.
  • this merujuk pada elemen DOM saat ini yang sedang diproses.

Contoh .not() dengan Fungsi

Di sini, kita ingin memberi gaya pada semua paragraf kecuali paragraf yang berisi kata 'exclude'. Fungsi tersebut memeriksa isi teks setiap paragraf.

<!DOCTYPE html>
<html>
<head>
<style>
  .italic { font-style: italic; }
</style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p>This paragraph contains 'exclude'.</p>
  <p>Another normal paragraph here.</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('p').not(function() {
        // Exclude paragraphs containing 'exclude'
        return $(this).text().includes('exclude');
      }).addClass('italic');
    });
  </script>
</body>
</html>

Merangkai .not() untuk Ketepatan

Anda dapat merangkai beberapa pemanggilan .not(), atau menggabungkan .not() dengan metode penyaringan lain, untuk membuat pemilihan yang sangat tepat.

Setiap pemanggilan .not() semakin menyempurnakan kumpulan elemen saat ini dengan menghapus lebih banyak elemen. Anggaplah seperti mengupas lapisan elemen yang tidak Anda perlukan.

Kapan Menggunakan .not()

.not() sangat berguna dalam situasi ketika:

  • Anda memiliki pemilihan awal yang luas dan ingin menghapus beberapa jenis tertentu.
  • Anda perlu mengecualikan elemen yang referensinya sudah Anda miliki secara langsung.
  • Menyatakan 'semua kecuali ini' membuat kode Anda lebih jelas dan mudah dibaca.

Metode ini merupakan cara elegan untuk mempersempit fokus tanpa harus menulis selektor negatif yang rumit sejak awal.

Pemeriksaan Singkat: Menggunakan .not()

Perhatikan HTML berikut. Cuplikan kode jQuery manakah yang dengan benar memilih semua elemen <p> kecuali elemen dengan ID "intro"?

<div>
  <p>Paragraph 1</p>
  <p id="intro">Introduction</p>
  <p>Paragraph 3</p>
</div>

Rangkuman: Menguasai .not()

Anda telah berhasil menguasai metode .not() jQuery!

Kita mempelajari bahwa .not() sangat penting untuk menyempurnakan pemilihan dengan mengecualikan elemen berdasarkan:

  • String selektor CSS (misalnya, .not('.hide'))
  • Elemen DOM atau objek jQuery tertentu (misalnya, .not(myElement))
  • Fungsi untuk logika pengecualian khusus yang dinamis.

Teruslah berlatih agar pemilihan jQuery Anda menjadi lebih tepat dan efisien!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengecualikan Elemen dengan .not()” gratis?

Ya — teks lengkap “Mengecualikan Elemen dengan .not()” 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 “Mengecualikan Elemen dengan .not()”?

Kuasai metode .not() untuk mengecualikan elemen tertentu secara tepat dari sekumpulan elemen yang cocok, menyempurnakan pemilihan, dan mencegah operasi yang tidak diinginkan pada elemen tertentu. 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 3 dari 3.

Berapa lama pelajaran “Mengecualikan Elemen dengan .not()” 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