JQuery ile Filtreleme

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

25.03.2012

2660

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>

$(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>

$(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

veysel@ugurkizmaz.com

www.ugurkizmaz.com

Yazar Hakkında

Veysel Uğur KIZMAZ

www.ugurkizmaz.com

YazılımDilleri.Net projesinin lideri olan Veysel Uğur Kızmaz, Gazi Üniversitesi Bilgisayar Mühendisliği bölümü mezunudur. Bir çok projede çalışmış, yazılım alanında birçok eğitimler vermiştir. Şu an özel bir yazılım danışmanlık firmasında Sharepoint proje danışmanlığı ve proje yöneticiliği yapmaktadır. Veysel Uğur Kızmaz, dahil olduğu projelerin çeşitliliği sebebiyle farklı alanlarda uzmanlaşmıştır: .Net, Sharepoint, Java, Php, Javascript, SQL Server, Oracle, MySQL.

Yazar Hakkında

Sosyal Medya

0 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar