JQuery Dersleri 3 - Even ve Odd Seçicileri

Jquery derslerimize verdiğimiz uzunca bir aradan sonra tekrar temel filtrelerle devam ediyoruz. Bu dersimizde de geçen dersimizde başladığımız Filtre seçicilerine first ve last yani örneğin bir listede ilk ve son elemanları bulmak işlevini getirme gibi, benzer şekilde even ve odd, yani çift ve tek sıralı olan elemanları nasıl bulabileceğimizi ve bunlara çeşitli özellikleri nasil ekleyebileceğimizi öğreneceğiz.

 :even seçicisi kullanımı

Öncelikle isterseniz even seçicisinin tekrar nasıl çalıştığından bahsedelim. bir HTML elemanları dizisinde, bir çok elementin olduğunu düşünelim. Burada belli bir sıra ile ilk elemandan başlamak üzere çift sayılı olanları seçmek istersek  onlara örneğin otomatik olarak ayrı bir renk verilmesini sağlayabiliriz. Burada dikkat edilecek husus, zero-ındex kavramına dikkat edilmesi gerektiğidir. Programlamada genellikle bildiğiniz gibi, dizilerde özellikle C programlama dilindeki gibi ilk eleman her zaman 0 numaralı indexden başlar. Bu şekilde (index 0,2,4 vs.) şeklinde seçmiş oluruz.

Bizim örneğimizde bir tablo kullandığımızı düşünürseniz, 4 satırlı bir dizide, 0 indexi 1 numaralı satıra, 2 indexi 3 numaralı satırlara denk gelir.

#0 indexli satır
#1 indexli satır
#2 indexli satır
#3 indexli satır

Yukarıdaki gibi tablonun çift indexli satırlarının farklı renk ile değiştirilmesi için aşağıdaki Jquery kodunu kullanabilirsiniz.

$("tr:even").css("background-color", "#cccccc");

 

Gördüğünüz gibi tek bir satırlık kod ile düz html sayfaları yaratmak dışında sayfanıza programatik özellik kazandırmış oluyorsunuz, yani statik bir sayfa yerine programın dinamik olarak kaç satırlık bir tablonuz olursa olsun, aynı şekilde her çift index numaralı satırı aynı şekilde işaretlemeye devam etmesini sağlayabilirsiniz. Burada :even seçicisinden önce tr kullanımı işlemin tablonun satırlarına uygulacağını ifade eder.

Eğer Jquery kullanmasaydık, bu işlemi Excel gibi elle tek tek seçerek satırlara renk vermek zorunda kalabilirdik.
 

$("tr:odd").css("background-color", "#cccccc");

 

Aynı işlemi :odd seçicisi kullanarak yapmak istediğimizde bu sefer de #0, #2, #4 şeklinde çift sayılar dizisi şeklinde indisler seçilerek işaretlendirilmeyecek de, tek sayılar yani #1, #3, #5 diye gidecek ve bu da tablomuzda sırasıyla 2. satır, 4.satır ve 6.satır olarak devam edecektir. Gördüğünüz gibi bu sayede tablobumuzun kaç satırdan oluştuğunu bilmeden, aynı kodu kullanarak, diyelim aynı sayfada bir kaç adet tablonuz olması durumunda işlemi uygulatarak zamandan tasarruf edebilirsiniz ve daha profesyonel bir görünüm elde edersiniz.

Jquery derslerimize seçicilerle devam edeceğiz...

Tekrar görüşünceye kadar, bu Jquery örneklerini kendiniz de denemeyi ve üzerlerinde oynayarak, kendi kombinasyonlarınızı oluşturmayı unutmayın...