Menyeleksi Elemen Dengan Fungsi Filter Pada JQuery

Menyeleksi Elemen Dengan Fungsi Filter Pada JQuery

48

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 :

XHTML

<!DOCTYPE html>

<html>

<head>

  <style>

  div{ width: 90%; }

  div, ul, li, span{ margin: 15px; padding: 15px; }

  div * { display: block; }

  div{ border: 1.5px solid #c2c2c2; }

  ul{ border: 1.5px solid #c2c2c2; list-style-type: none; }

  li{ border: 1.5px solid #c2c2c2; }

  span{ border: 1.5px solid #c2c2c2; }

  </style>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

  <div>div ( Great Grandparent )

    <ul> ul ( Grandparent )

      <li class="nol"> li ( Father ) ( nol )

      </li>

      <li class="satu"> li ( Father ) ( satu )

      </li>

      <li class="dua"> li ( Father ) ( dua )

      </li>

      <li class="tiga"> li ( Father ) ( tiga )

      </li>

      <li class="empat"> li ( Father ) ( empat )

      </li>

    </ul>

  </div>

  

  <button class="li">&lt;li&gt; first()</button>

  <button class="refresh">Refresh</button>



  <script>

    $(function(){

      $("button.li").click(function(){

        $("li").first().css("border-color", "#000000");

      });

      $("button.refresh").click(function(){

        $("div, ul, li, span").css("border-color", "#c2c2c2");

      });

    });

  </script>

</body>

</html>

Dan gambar di bawah ini adalah outputnya :

fungsi method first pada jquery


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 :

XHTML

<!DOCTYPE html>

<html>

<head>

  <style>

  div{ width: 90%; }

  div, ul, li, span{ margin: 15px; padding: 15px; }

  div * { display: block; }

  div{ border: 1.5px solid #c2c2c2; }

  ul{ border: 1.5px solid #c2c2c2; list-style-type: none; }

  li{ border: 1.5px solid #c2c2c2; }

  span{ border: 1.5px solid #c2c2c2; }

  </style>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

  <div>div ( Great Grandparent )

    <ul> ul ( Grandparent )

      <li class="nol"> li ( Father ) ( nol )

      </li>

      <li class="satu"> li ( Father ) ( satu )

      </li>

      <li class="dua"> li ( Father ) ( dua )

      </li>

      <li class="tiga"> li ( Father ) ( tiga )

      </li>

      <li class="empat"> li ( Father ) ( empat )

      </li>

    </ul>

  </div>

  

  <button class="li">&lt;li&gt; last()</button>

  <button class="refresh">Refresh</button>



  <script>

    $(function(){

      $("button.li").click(function(){

        $("li").last().css("border-color", "#000000");

      });

      $("button.refresh").click(function(){

        $("div, ul, li, span").css("border-color", "#c2c2c2");

      });

    });

  </script>

</body>

</html>

Dan di bawah ini adalah outputnya :

fungsi method last pada jquery


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.

XHTML

<!DOCTYPE html>

<html>

<head>

  <style>

  div{ width: 90%; }

  div, ul, li, span{ margin: 15px; padding: 15px; }

  div * { display: block; }

  div{ border: 1.5px solid #c2c2c2; }

  ul{ border: 1.5px solid #c2c2c2; list-style-type: none; }

  li{ border: 1.5px solid #c2c2c2; }

  span{ border: 1.5px solid #c2c2c2; }

  </style>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

  <div>div ( Great Grandparent )

    <ul> ul ( Grandparent )

      <li class="nol"> li ( Father ) ( nol )

      </li>

      <li class="satu"> li ( Father ) ( satu )

      </li>

      <li class="dua"> li ( Father ) ( dua )

      </li>

      <li class="tiga"> li ( Father ) ( tiga )

      </li>

      <li class="empat"> li ( Father ) ( empat )

      </li>

    </ul>

  </div>

  

  <button class="li">&lt;li&gt; eq(3)</button>

  <button class="refresh">Refresh</button>



  <script>

    $(function(){

      $("button.li").click(function(){

        $("li").eq(3).css("border-color", "#000000");

      });

      $("button.refresh").click(function(){

        $("div, ul, li, span").css("border-color", "#c2c2c2");

      });

    });

  </script>

</body>

</html>

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.


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.

XHTML

<!DOCTYPE html>

<html>

<head>

  <style>

  div{ width: 90%; }

  div, ul, li, span{ margin: 15px; padding: 15px; }

  div * { display: block; }

  div{ border: 1.5px solid #c2c2c2; }

  ul{ border: 1.5px solid #c2c2c2; list-style-type: none; }

  li{ border: 1.5px solid #c2c2c2; }

  span{ border: 1.5px solid #c2c2c2; }

  </style>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

  <div>div ( Great Grandparent )

    <ul> ul ( Grandparent )

      <li class="nol"> li ( Father ) ( nol )

      </li>

      <li class="satu"> li ( Father ) ( satu )

      </li>

      <li class="dua"> li ( Father ) ( dua )

      </li>

      <li class="tiga"> li ( Father ) ( tiga )

      </li>

      <li class="empat"> li ( Father ) ( empat )

      </li>

    </ul>

  </div>

  

  <button class="li">&lt;li&gt; filter()</button>

  <button class="refresh">Refresh</button>



  <script>

    $(function(){

      $("button.li").click(function(){

        $("li").filter("li.dua").css("border-color", "#000000");

      });

      $("button.refresh").click(function(){

        $("div, ul, li, span").css("border-color", "#c2c2c2");

      });

    });

  </script>

</body>

</html>

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


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 :

XHTML

<li class="nol">

<li class="satu">

<li class="tiga">

<li class="empat">

Berikut contoh source code – nya :

XHTML

<!DOCTYPE html>

<html>

<head>

  <style>

  div{ width: 90%; }

  div, ul, li, span{ margin: 15px; padding: 15px; }

  div * { display: block; }

  div{ border: 1.5px solid #c2c2c2; }

  ul{ border: 1.5px solid #c2c2c2; list-style-type: none; }

  li{ border: 1.5px solid #c2c2c2; }

  span{ border: 1.5px solid #c2c2c2; }

  </style>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

  <div>div ( Great Grandparent )

    <ul> ul ( Grandparent )

      <li class="nol"> li ( Father ) ( nol )

      </li>

      <li class="satu"> li ( Father ) ( satu )

      </li>

      <li class="dua"> li ( Father ) ( dua )

      </li>

      <li class="tiga"> li ( Father ) ( tiga )

      </li>

      <li class="empat"> li ( Father ) ( empat )

      </li>

    </ul>

  </div>

  

  <button class="li">&lt;li&gt; not("li.dua")</button>

  <button class="refresh">Refresh</button>



  <script>

    $(function(){

      $("button.li").click(function(){

        $("li").not("li.dua").css("border-color", "#000000");

      });

      $("button.refresh").click(function(){

        $("div, ul, li, span").css("border-color", "#c2c2c2");

      });

    });

  </script>

</body>

</html>

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

fungsi method not pada jquery


Demikian tutorial dari Menyeleksi Elemen Dengan Fungsi Filter Pada JQuery.

Keywords: elemen filter jquery, cara filter jquery

Share:



Next Post: