"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

JQuery ile Filtreleme

Bu makalemizde jQuery ile DOM nesnelerine erişim için filter() fonksiyonunun kullanımını inceleyeceğiz.

Bu makalemizde jQuery ile DOM nesnelerine erişim için filter() fonksiyonunun kullanımını inceleyeceğiz.
 
filter() fonksiyonu, DOM nesnelerinde filtreleme yaparak filtreye uygun elemanlarla ilgili işlem yapılabilmesini sağlamaktadır.Bu fonksiyonu birkaç örnekle inceleyelim.
 
İlk örneğimizde butona tıkladığımızda filter() fonksiyonu parametre olarak css class’ını alıp bu class’a sahip “div”lerin css classlarını kaldıracaktır.
 
 
<html>
            <head>
                        <script src="jquery-1.5.1.js"></script>
                        <script>
                                   $(document).ready(function(){
                                               $("#btn").click(function(){
                                                           $("div").filter(".sinif2").removeClass();
                                               });
                                   });
                        </script>
                        <style>
                                   .sinif1{
                                               background:yellow;
                                               color:red;
                                   }
                                   .sinif2{
                                               background:red;
                                               color:yellow;
                                   }
                        </style>
            </head>
            <body>
                        <div class="sinif1">Veysel Uğur KIZMAZ</div>
                        <div class="sinif1">Engin DEMİROĞ</div>
                        <div class="sinif2">Tolga AYAS</div>
                        <div class="sinif1">Salih DEMİROĞ</div>
                        <button id="btn">Filter</button>
            </body>
</html>
 
Örneği inceleyecek olursak, ilk açılışta ekran görüntüsü aşağıdaki gibi olacaktır.
 
 
 
 
Butona tıkladıktan sonra ekran görüntüsü aşağıdaki gibi olacaktır.
 
 
Yani “sinif2” classına sahip elemanların css classları kaldırılmıştır.
 
İkinci örneğimizde ise filter() fonksiyonu içinde bir fonksiyon tanımlayıp, bu fonksiyonun parametre olarak aldığı index’in fonksiyon sonucunda “true” değerini döndürüyorsa işlemi yapmakta, “false” değerini döndürüyorsa işlem yapmamaktadır.
 
<html>
            <head>
                        <script src="jquery-1.5.1.js"></script>
                        <script>
                                    $(document).ready(function(){
                                               $("#btn").click(function(){
                                                           $("div").filter(function(index){
                                                                       return index % 4 == 1
                                                           }).removeClass();
                                               });
                                   });
                        </script>
                        <style>
                                   .sinif1{
                                               background:yellow;
                                               color:red;
                                   }
                                   .sinif2{
                                               background:red;
                                               color:yellow;
                                   }
                        </style>
            </head>
            <body>
                        <div class="sinif1">Veysel Uğur KIZMAZ</div>
                        <div class="sinif1">Engin DEMİROĞ</div>
                        <div class="sinif2">Tolga AYAS</div>
                        <div class="sinif1">Salih DEMİROĞ</div>
                        <button id="btn">Filter</button>
            </body>
</html>
 
Örneği inceleyecek olursak, sayfa ilk açıldığında ekran görüntüsü aşağıdaki gibi olacaktır.
 
 
Butona tıklandığında ise “index % 4 == 1” ifadesini doğrulayan (index = 1) elemanın css class’ı kaldırılmakta ve ekran görüntüsü aşağıdaki gibi olmaktadır.
 
 
Burada bu fonksiyonun içerisine istenilen işlemler yazılabilir.
 
 
 
 
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
 
 

Yorumlar (0)

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.