Bu yazımızda jQuery filter() metodunun ne işe yaradığını ve nasıl kullanabileceğimizi öğreneceğiz.
filter() metodu ile Html öğeleri içerisinde filtreleme işlemlerini yapabiliriz. Bu filtreleme işlemlerini seçicileri kullanarak yapabildiğimiz gibi fonksiyonları kullanarak da yapabiliyoruz.
filter() metodunun her iki kullanımını da birer örnek üzerinden inceleyelim.
İlk olarak filter() metodunu seçiciler ile birlikte kullanalım.
⇒ 4 tane p etiketi yazalım.
⇒ 2 tane p etiketinin class’ına custom yazalım.
⇒ Butona tıklandığında class’ı custom olanları filtreleyelim ve arkaplan rengini açık mavi yapalım.
Html Kodları
|
1 2 3 4 5 6 7 8 |
<button id="filter">filter(".custom")</button> <p>Lorem ipsum dolor.</p> <p class="custom">Lorem ipsum dolor. (class = "custom")</p> <p class="custom">Lorem ipsum dolor. (class = "custom")</p> <p>Lorem ipsum dolor.</p> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> button { padding: 10px; margin-right: 8px; margin-bottom: 18px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } </style> |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#filter").click(function() { $("p").filter(".custom").css("background-color", "lightblue"); }); }); </script> |
Butona tıkladığınızda class’ı custom olan p etiketlerinin arkaplan renklerinin değiştiğini görebilirsiniz.
Şimdi de filter() metodunu bir fonksiyon ile birlikte kullanalım.
⇒ 4 tane liste oluşturalım.
⇒ Butona tıklandığında 2 elemanlı olan listelerin yazı rengini kırmızı, font büyüklüğünü 24px yapalım.
Html Kodları
|
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 |
<button id="filter">Filter</button> <p>List 1</p> <ul> <li>Lorem ipsum 1</li> <li>Lorem ipsum 2</li> </ul> <p>List 2</p> <ul> <li>Lorem ipsum 1</li> </ul> <p>List 3</p> <ul> <li>Lorem ipsum 1</li> <li>Lorem ipsum 2</li> </ul> <p>List 4</p> <ul> <li>Lorem ipsum 1</li> <li>Lorem ipsum 2</li> <li>Lorem ipsum 3</li> </ul> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> button { padding: 10px; margin-right: 8px; margin-bottom: 18px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } </style> |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#filter").click(function(){ $("ul").filter(function() { return $("li", this).length == 2; }).css("color", "red").css("fontSize", "24px"); }); }); </script> |
Butona tıkladığınızda 2 elemanlı olan listelerin yazı renginin kırmızı, yazı font büyüklüğünün 24px olarak değiştiğini görebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery animate(), stop() Metodları ve Kullanımları
jQuery slideDown(), slideUp(), slideToggle() Metodları ve Kullanımları
Yeni bir yazımda görüşmek üzere.
 Metodu ve Kullanımı){kind=link}