Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini kita akan belajar tentang Cara Menggunakan JQuery Filter () Metode. Pada tutorial kali ini teman – teman akan belajar tentang bagaimana caranya menyaring pemilihan elemen menggunakan jQuery. Menyaring Seleksi Elemen jQuery menyediakan beberapa metode seperti filter (), first (), last (), eq (), slice (), has (), not (), dll yang dapat teman – teman gunakan untuk mempersempit pencarian elemen dalam DOM. Metode jQuery filter () dapat mengambil pemilih atau fungsi sebagai argumennya untuk menyaring kumpulan elemen yang sesuai berdasarkan kriteria tertentu. Pemilih atau fungsi yang dimasukan ke metode filter () diuji terhadap masing-masing elemen dalam himpunan elemen yang sesuai dan semua elemen yang sesuai dengan pemilih yang dimasukan atau lulus uji fungsi akan disertakan dalam hasilnya.
Oke untuk lebih jelasnya silahkan lihat contoh di bawah ini;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery filter() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").filter(":even").addClass("highlight"); }); </script> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Fourth list item</li> </ul> </body> |
Seperti yang dinyatakan sebelumnya, Teman – teman juga dapat melewatkan fungsi ke metode filter () untuk menyaring rangkaian elemen yang sesuai berdasarkan kondisi tertentu. Contoh berikut akan menguji setiap elemen <li> di dalam <ul> dan sorot elemen <li> yang indeksnya adalah angka ganjil, hanya menyoroti item daftar kedua dan keempat karena indeks berbasis nol.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery filter() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").filter(function(index){ return index % 2 !== 0; }).addClass("highlight"); }); </script> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Last list item</li> </ul> </body> </html> |
Oke teman – teman untuk melihat hasilnya silahkan teman – teman coba praktikkan sendiri silah copy paste script di atas. Oke itulah tadi pembahasan saya tentang Cara Menggunakan JQuery Filter () Metode semoga bermanfaat.