Menyeleksi Elemen Dengan Fungsi Filter Pada JQuery

Dalam tutorial kali ini akan membahas tentang bagaimana caranya untuk Menyeleksi Elemen Dengan Fungsi Filter Pada JQuery.

Jika pada cara sebelumnya kita menggunakan method parent, child, dan juga sibling untuk mendapatkan elemen yang memiliki tingkatan dari elemen yang menjadi trigger, maka sebenarnya ada method lain yang dapat digunakan untuk menyeleksi elemen – elemen tersebut. Yakni dengan menerapkan metode Filtering. Namun tetap saja anda harus membuat elemen trigger sebagai patokannya.

Method lainnya yang dapat anda gunakan untuk memfilter elemen adalah first(), last(), eq(), filter(), juga dan not(), dengan begitu anda dapat menyeleksi elemen dengan lebih spesifik.

Mendapatkan elemen pertama dengan method first()

Method first() dapat kita gunakan untuk memilih elemen pertama dalam urutan elemen yang setingkat. Berikut contoh source code – nya :

Dan gambar di bawah ini adalah outputnya :

fungsi method first pada jquery

Live Preview :

See the Pen
Method Filter Pada JQuery
by Lautankode (@lautankode)
on CodePen.


Mendapatkan elemen terakhir dengan method last()

Anda juga dapat memilih elemen terakhir dari level elemen yang setingkat dengan menggunakan method last().

Berikut source code nya :

Dan di bawah ini adalah outputnya :

fungsi method last pada jquery

Live Preview :

See the Pen
Method Last Pada JQuery
by Lautankode (@lautankode)
on CodePen.


Mendapatkan elemen berdasarkan index nomornya menggunakan method eq()

Sedangkan untuk mendapatkan elemen tertentu yang berada di tengah – tengah elemen lainnya, kita dapat menggunakan method eq(), namun dalam method ini anda juga harus mendefinisikan parameternya. Nilai dari parameternya berupa angka, dimulai dari 0 dan bukan 1.

Dari contoh source code di atas, saya menentukan elemen <li class=”tiga”> sebagai elemen yang saya definisikan dalam method eq(3). Dan di bawah ini adalah outputnya :

fungsi method eq pada jquery

Anda juga dapat memilih elemen lainnya dengan merubah paramternya berdasarkan nomor index tiap elemen.

Di bawah ini saya berikan Live Preview nya, silahkan anda rubah nilai parameter yang ada pada fungsi eq() :

See the Pen
Method eq pada JQuery
by Lautankode (@lautankode)
on CodePen.


Mendapatkan elemen dengan method filter()

Method filter() juga dapat anda gunakan untuk memilih elemen dalam struktur elemen yang setingkat. Anda pun juga harus mendefinisikan parameter dalam method filter() ini, parameter yang di definisikan bukanlah nomor index elemen tersebut, namun tag elemen tersebut atau class atau id – nya.

Dalam contoh source code di atas, saya memilih elemen <li> dengan class=”dua” sebagai elemen yang akan di filter oleh method filter(). Dan gambar di bawah ini adalah outputnya :

fungsi method filter pada jquery

Live Preview :

See the Pen
Method Filter Pada JQuery
by Lautankode (@lautankode)
on CodePen.


Mendapatkan elemen dengan method not()

Sifat dari method not() ini adalah ingkar atau kebalikannya. Yakni, bila parameter yang kita isi dalam method not() ini adalah <li class=”dua”>, ini berarti elemen yang kita pilih adalah elemen <li> lainnya dengan method yang selain daripada <li class=”dua”>.

Jadi yang terpilih adalah  :

Berikut contoh source code – nya :

Dan di bawah ini adalah hasilnya ketika tombol <li> not(‘li.dua’) di klik.

fungsi method not pada jquery

Live Preview :

See the Pen
Fungsi method not pada JQuery
by Lautankode (@lautankode)
on CodePen.


Demikian tutorial dari Menyeleksi Elemen Dengan Fungsi Filter Pada JQuery.

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us