Seleksi Banyak Element Melalui Index dengan jQuery

Pada artikel ini saya akan sharing tentang penyeleksian element html yang banyak untuk mengambil element tertentu dengan index dari element tersebut dengan jquery. Untuk yang sudah paham mengenai penyeleksian ini tidak usah dibaca, namun apabila ingin refresh atau mengingat-ingat kembali api jquery ini silahkan..

Berikut saya jelaskan terlebih dahulu bagaimana javascript default mengambil banyak element tertentu dengan index yang kita inginkan.

Saya buat html sederhana seperti dibawah 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
34
35
<!DOCTYPE html>
<html>
<head>
  <style>
    .notif{
      color: red;
    }
   
    ul#listrep{
      list-style-type: none;
      padding-left: 0px;
      width: 70px;
    }
   
    ul#listrep li {
      border : 1px solid blue;
      padding: 5px;
    }
  </style>
</head>
<body>
  <ul id='listrep'>
    <li>satu</li>
    <li>dua</li>
    <li>tiga</li>
    <li>empat</li>
    <li>lima</li>
    <li>enam</li>
    <li>tujuh</li>
    <li>delapan</li>
    <li>sembilan</li>
    <li>sepuluh</li>
  </ul>
</body>
</html>

Dari kode html di atas, coba ubah list element ke 3 dengan warna merah. Yang pernah membuat pasti merasa lama membuat kode dengan javascript default. Itu hanya membuat element ke-3 dengan warna merah saja, bagaimana bila element diantara element 4 dan 8 yang harus dirubah dengan warna merah ? Pasti rada panjang kode javascriptnya.

Untungnya kita sudah ada jQuery, dengan jquery kita dapat menyeleksi kasus sederhana seperti diatas dengan 1 baris saja, ya tentunya dengan menambahkan jquery ke html kita diatas. Bagaimana caranya ?

Di jQuery terdapat banyak api atau saya sebut sebagai fungsi untuk melakukan penyeleksian beberapa
element html dengan index tertentu. Salah satu yang pertama adalah fungsi :eq(). Fungsi :eq() di jQuery saya sebut berguna untuk menyeleksi elemen tertentu pada index tertentu. Misalnya dapat dilihat pada kode dibawah 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
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
  <style>
    .notif{
      color: red;
    }
   
    ul#listrep{
      list-style-type: none;
      padding-left: 0px;
      width: 70px;
    }
   
    ul#listrep li {
      border : 1px solid blue;
      padding: 5px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul id='listrep'>
    <li>satu</li>
    <li>dua</li>
    <li>tiga</li>
    <li>empat</li>
    <li>lima</li>
    <li>enam</li>
    <li>tujuh</li>
    <li>delapan</li>
    <li>sembilan</li>
    <li>sepuluh</li>
  </ul>
 
  <script>
    $(function(){
      $("li:eq(4)").addClass("notif");
    });
  </script>
</body>
</html>

Pada kode diatas, saat menjalankan pada browser kita maka akan terlihat bahwa element li ke-5 akan berubah warna nya dengan warna merah. Perubahan tersebut dilakukan hanya dengan 1 baris saja yaitu pada kode

1
$("li:eq(4)").addClass("notif");

lihat, bahwa 4 tersebut adalah untuk menarik index ke-4 dari element list. Karna di javascript index selalu dimulai dengan index ke-0 maka saat menarik index ke-4 akan mengambil index element li dengan text “lima”.

Selain fungsi :eq() terdapat juga fungsi lainnya untuk menyeleksi beberapa kondisi seperti fungsi :gt().
Saya contohkan kode dibawah 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
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
  <style>
    .notif{
      color: red;
    }
   
    ul#listrep{
      list-style-type: none;
      padding-left: 0px;
      width: 70px;
    }
   
    ul#listrep li {
      border : 1px solid blue;
      padding: 5px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul id='listrep'>
    <li>satu</li>
    <li>dua</li>
    <li>tiga</li>
    <li>empat</li>
    <li>lima</li>
    <li>enam</li>
    <li>tujuh</li>
    <li>delapan</li>
    <li>sembilan</li>
    <li>sepuluh</li>
  </ul>
 
  <script>
    $(function(){
      $("li:gt(4)").addClass("notif");
    });
  </script>
</body>
</html>

Apabila kita lihat bahwa dengan menggunakan fungsi :gt(), kita dapat menyeleksi index setelah dari index yang telah kita tentukan. Pada contoh diatas saya coba dengan index ke-4 dan hasilnya terlihat setelah index ke-4 element list berubah berwarna merah. Jadi fungsi :gt() merupakan fungsi untuk menyeleksi index dari element tertentu lebih besar dari index yang telah kita tentukan.

Lalu bagaimana dengan index sebelum index ke-4, adakah fungsi untuk menyeleksi index sebelum index ke-4 ?

Di jQuery ternyata disediakan pula untuk menyeleksi lebih kecil dari index yang telah kita tentukan. Fungsi :lt() di jQuery dapat kita pakai untuk kondisi seperti itu. Berikut adalah contohnya.

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
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
  <style>
    .notif{
      color: red;
    }
   
    ul#listrep{
      list-style-type: none;
      padding-left: 0px;
      width: 70px;
    }
   
    ul#listrep li {
      border : 1px solid blue;
      padding: 5px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul id='listrep'>
    <li>satu</li>
    <li>dua</li>
    <li>tiga</li>
    <li>empat</li>
    <li>lima</li>
    <li>enam</li>
    <li>tujuh</li>
    <li>delapan</li>
    <li>sembilan</li>
    <li>sepuluh</li>
  </ul>
 
  <script>
    $(function(){
      $("li:lt(4)").addClass("notif");
    });
  </script>
</body>
</html>

Mungkin kita ingin menyeleksi terhadap index tertentu sampai index tertentu. Dengan fungsi .slice nya milik jQuery kita dapat melakukan hal tersebut dengan mudah. Berikut contoh sederhana bagaimana mendapatkan index ke-4, ke-5, ke-6, dan ke-7

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
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
  <style>
    .notif{
      color: red;
    }
   
    ul#listrep{
      list-style-type: none;
      padding-left: 0px;
      width: 70px;
    }
   
    ul#listrep li {
      border : 1px solid blue;
      padding: 5px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul id='listrep'>
    <li>satu</li>
    <li>dua</li>
    <li>tiga</li>
    <li>empat</li>
    <li>lima</li>
    <li>enam</li>
    <li>tujuh</li>
    <li>delapan</li>
    <li>sembilan</li>
    <li>sepuluh</li>
  </ul>
 
  <script>
    $(function(){
      $("li").slice(4,8).addClass("notif");
    });
  </script>
</body>
</html>

Untuk diperhatikan mengenai fungsi .slice bahwa parameter pertama merupakan parameter untuk index awal yang ingin diseleksi, sedangkan parameter kedua merupakan parameter untuk index batas. Jadi apabila saya tulis seperti ini.

1
$("li").slice(4,5).addClass("notif");

maka yang diseleksi oleh si jQuery nya adalah hanya index ke-4 sedangkan index ke-5 tidak akan terseleksi.

Sampai disini, moga ada tambahan ilmunya buat pembaca.

Rerefensi : http://api.jquery.com/category/selectors/

8 comments

Leave a Reply

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

%d bloggers like this: