Section Artikel
Metode first(), last(), eq(), filter() dan not()
Metode pemfilteran paling dasar adalah first(), last (), dan eq () yang berfungsi untuk memilih elemen tertentu berdasarkan posisinya dalam sekelompok elemen.
Metode pemfilteran lain, seperti filter() dan not() berfungsi untuk memilih elemen yang cocok atau tidak cocok dengan kriteria tertentu.
Metode jQuery first()
Metode first() berfugnsi untuk mengembalikan elemen pertama dari elemen yang ditentukan.
Contoh berikut memilih elemen <div> pertama:
Contoh :
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").first().css("background-color", "yellow"); }); </script> </head> <body> <h1>Selamat Datang di Homepage</h1> <p> Ini adalah paragraf. </p> <div style = "border: 1px solid black;"> <p> Paragraf dalam div. </p> <p> Paragraf lain dalam div. </p> </div> <br> <div style = "border: 1px solid black;"> <p> Paragraf di div lain. </p> <p> Paragraf lain di div lain. </p> </div> <br> <div style = "border: 1px solid black;"> <p> Paragraf di div lain. </p> <p> Paragraf lain di div lain. </p> </div> </body> </html>
Metode jQuery last()
Metode last() berfungsi untuk mengembalikan elemen terakhir dari elemen yang ditentukan.
Contoh berikut memilih elemen <div> terakhir:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").last().css("background-color", "yellow");
});
</script>
</head>
<body>
<p> Ini adalah paragraf. </p>
<div style = "border: 1px solid black;">
<p> Paragraf dalam div. </p>
<p> Paragraf lain dalam div. </p>
</div>
<br>
<div style = "border: 1px solid black;">
<p> Paragraf di div lain. </p>
<p> Paragraf lain di div lain. </p>
</div>
<br>
<div style = "border: 1px solid black;">
<p> Paragraf di div lain. </p>
<p> Paragraf lain di div lain. </p>
</div>
</body>
</html>
Metode jQuery eq()
Metode eq() mengembalikan elemen dengan nomor indeks tertentu dari elemen yang dipilih.
Nomor indeks dimulai dari 0, jadi elemen pertama akan memiliki nomor indeks 0 dan bukan 1. Contoh berikut memilih elemen <p> kedua (nomor indeks 1):
Contoh:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(".intro").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald.</p>
<p class="intro">I live in Indodnesia.</p>
<p class="intro">I love Indonesia.</p>
<p>Sahabat ku adalah Mickey.</p>
</body>
</html>
Metode jQuery filter()
Metode filter() berfungsi untuk menentukan kriteria. Elemen yang tidak cocok dengan kriteria akan dihapus dari pilihan, dan elemen yang cocok akan dikembalikan.
Contoh berikut mengembalikan semua <p> elemen dengan nama kelas “intro”:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(".intro").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>Namaku is Donald.</p>
<p class="intro">I live in Indodnesia.</p>
<p class="intro">I love Indonesia.</p>
<p>Sahabat ku adalah Mickey.</p>
</body>
</html>
Metode jQuery not()
Metode not() berfungsi untuk mengembalikan semua elemen yang tidak cocok dengan kriteria.
Tip: Metode not() adalah kebalikan dari metode filter().
Contoh berikut mengembalikan semua <p> elemen yang tidak memiliki nama kelas “intro”:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").not(".intro").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>Namaku is Donald.</p>
<p class="intro">I live in Indodnesia.</p>
<p class="intro">I love Indonesia.</p>
<p>Sahabat ku adalah Mickey.</p>
</body>
</html>
