Jumat, 12 Juli 2013

Pada suatu kasus tertentu, kita ingin membuat fitur pencarian dari beberapa <div> dengan menggunakan filterisasi. Contoh tag kasus :

<div class="majalah"></div>
<div class="koran"></div>
<div class="marsitoh"></div>

Di atas, saya menyediakan 3 <div> tag yang dari setiap div memiliki class. Contoh, kita akan menyeleksi <div> yang memiliki class dengan berawalan 'ma', maka kurang lebih kita bisa menggunakan jQuery seperti berikut :

$('div[class^="ma"]')

Namun, bagaimana jika kita ingin menyeleksi <div> tag yang memiliki class selain berawalan 'ma' ? ('koran' misalnya).
Cukup sederhana! jQuery telah mengantisipasi ini dengan menyediakan fungsi selektor :not() . Yap, anda cukup mengubahnya sehingga menjadi :

$('div:not([class^="ma"])')

Mudah bukan? Sekarang anda bisa bereksperimen sendiri dengan trik ini. Sebagai contoh, ketika tag html diatas tadi akan anda hilangkan berdasarkan apa yang User ketik dalam sebuah teks inputan. Lihat kode dibawah :

<input type="text" name="q" />

Maka tinggal anda atur seleksi eventnya! Contoh :

$(function(){
    $('input[name="q"]').keyup(function(){
        var q = $(this);
        $('div:not([class^="' + q.val() + '"])').remove();
    });
});

Semoga bermanfaat! :)

0 komentar:

Posting Komentar

Subscribe to RSS Feed Follow me on Twitter!