Jquery’de find fonksiyonu ile ulaşmak istediğiniz bir element varsa isterseniz seçici, object veya elementleri parametre olarak geçerek istediğiniz elemente ulaşabilirsiniz. Makalenin devamında örnekli bir şekilde konuyu daha iyi anlayabilirsiniz.
Jquery find fonksiyonu ile arama yapma
Find fonksiyonuna parametre olarak geçebileceğiniz değerler ve özelliğin hangi jquery versiyonu ile geldiği hakkındaki bilgiye alttaki tablodan ulaşabilirsiniz.
| Özellik | Açıklama | Jquery versiyonu |
|---|---|---|
| .find(seçici) | jquery seçicileri | 1.0 |
| .find(Jquery nesne) | jquery nesnesi | 1.6 |
| .find(eleman) | element | 1.6 |
Şimdi bol örneklerle olayı daha iyi anlamaya çalışalım…
Örnek 1
Html Kodu
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul> |
jQuery Kodu
1 2 3 | $(function(){ $('li.item-ii').find('li').css("background-color","red"); }); |
Kısaca üstteki kodu özetlemek gerekirse li elementinin class özelliğinin değeri item-ii olan elemanların altındaki li etiketlerinin tamamının arkaplan rengini kırmızı yapmasını istiyoruz.
find fonksiyonuna jquery 1.6 versiyonu ile beraber element’ler parametre olarak geçilebiliyordu şimdi find fonksiyonu içerisine li etiketlerinin tümünü önceden bir değişkene alıp find fonksiyonuna parametre olarak geçelim.
1 2 | var tumLiElemanlari = $("li"); $("li.item-ii").find(tumLiElemanlari); |
Şimdi ise üstteki html kodumuzdan yola çıkarak class özelliğinin değeri ‘item-1’ olan li elementini bir değişkene alıp find fonksiyonuna parametre olarak geçiyoruz ve li class özelliği değeri ‘item-ii’ olan elementin altındaki ‘li’ etiketklerinin arkaplan renklerini kırmızı yap diyoruz.
1 2 | var item1 = $( "li.item-1" )[ 0 ]; $( "li.item-ii" ).find( item1 ).css( "background-color", "red" ); |
