JQuery Dersleri 4 - lt, gt ve eq Seçicileri

Değerli okurlarımız, bu yazımızda da Jquery dersleri serimize devam ediyoruz. Bu paylaşımda lt ve gt seçicilerini işleyeceğiz. Bilmeyenler için lt (less than) yani belli bir değerden az anlamında , gt (greater than) bell bir değerden büyük anlamını taşımaktadır. Anlayacağınız gibi türkçede küçüktür ve büyüktür olarak çevirebiliriz.

Öncelikle lt seçicisini inceleyelim:

Bu tip sayısal seçiciler belli bir değer üzerinden seçim gerçekleştirdikleri için index bazlıdırlar. Yani lt seçicisini bir örnekle açıklarsak;
 

$("tr:lt(5)")

 
Yukarıdaki tek satırlık kod ile bir tabloda 5 numaralı index değerinden düşükolan tümsatırları seçebiliriz.

Bunu biraz daha açmak gerekirse, bir tablo yaptık ve ilk beş satırının farklı renkte gözükmesini istiyoruz, bunu 0 numaralı indexten başlayarak sayarsak, #0 #1 #2 #3 #4   <  5  sayısal olarak beş değerinden küçük oldukları için seçilmiş olurlar.

Bunun tam tersini de yapmak mümkündür. Onu da gt seçicisinde farklı bir örnekte görelim.

gt seçicisi:

$("tr:gt(3)")

 
Bu sefer de 3 numaralı index değerinden büyük olan satırlar seçilir. Yani index değerleriyle görmek gerekirse,    #0 #1 #2 #3   numaralı indexlerden büyük olan satırlardır. Diğer bir deyişle ilk 4 satır atlanmış olur, diğer tüm satırlar işaretlenir.

İki örnekte de gördüğünüz gibi, JQuery seçicileri ile bir çok işlemi tek satırda yapmak mümkündür, önemli olan burada da olduğu gibi, onları nasıl kullanacağınızı yaratıcı bir şekilde bulabilmektir.

Bu noktadan yola çıkarak bir noktayı daha merak edebilirsiniz. Bir tabloda belli bir satırdan sonrasını veya belli bir satırdan öncesini lt ve gt seçicileri ile bulabiliyoruz.

Fakat diyelim ki bunu değil de, tam olarak belli bir index değerinin ta kendisine eşit olan satırı bulmak istersek ne yapacağız. Merak etmeyin Jquery bu noktada yine yardımınıza koşuyor.

eq seçicisi:

Bu noktada tablo örneğimizi de değiştirerek farklı bir alıştırma yapalım. Örneğin bir İYS (İçerik Yönetim Sistemi) geliştiriyorsunuz ve her makalenin ilk paragrafının bold olarak otomatik olarak vurgulanmasını istiyorsunuz. Burada eq kelime anlamı olarak equal yani eşittir demektir.

$("p:eq(0)").css("font-weight","bold");

 
Gördüğünüz gibi eq, lt ve gt seçicileri diğer metodlarla birleştirilerek kullanılmakta ve anlamlı hale gelmektedir.

Bu örnekleri siz de çoğaltabilirsiniz. Meslea ikinci paragrafdaki linklerin altı çizili olmasını isteyebilir, bundan sonrakilerin ise kırmızı olmasını css metodu ile gerçekleştirebilirsiniz.

1 yorum

1.  Anonymous (19 Ocak, 2011 - 16:10) says:

Jquery derslerinin devamini istiyoruz :)