:eq() Seçicisi

eq selector Vazgeçilen versiyon 3.4

Açıklama : Bulunulan set içinde index'i n olarak verilen elemanı bulur.

jQuery( ":eq(index)" ) Eklendiği Versiyon 1.0

index : Elemanın sıra numarası, sıfırdan başlayarak sayım.

jQuery( ":eq(-index)" ) Eklendiği Versiyon 1.8

indexFromEnd : Sıfırdan geri sayarak eleman index'i.

JQuery 3.4 itibarıyla :eq() sahte sınıfından vazgeçildi. Eğer varsa seçicilerinizden onu çıkarıp yerine sonuçları .eq() metodu ile filtreleyiniz.

Index'e bağlı seçiciler (:eq(), :lt(), :gt(), :even, :odd) önlerine eklenen eleman setini filtrelerler. Verilen seti seçiciye uygun olarak daraltırlar. Örneğin elemanlar önce bir class seçiciyle seçilirse ( .myClass ) ve 4 elemanlık bir set dönerse eleman index'leri 0'dan 3'e sıralanarak bu seçicilerce işlenir.

Not : JavaScript array'ler sıfırdan başlayan indexlere sahip olduğu için $( ".myclass:eq(1)" ) dökümandaki .myclass sınıf değerine sahip ikinci elemanı seçer, ama CSS standardı olan :nth-child(n) 1'den başlayarak elemanları sayar.

Versiyon 1.8 öncesi :eq(index) seçicisi index olarak negatif bir sayı almaz (fakat .eq(index) metodu alır).

İlave Notlar :

:eq() bir jQuery eklentisi olduğu ve CSS standardı olmadığı için JavaScript querySelectorAll() metodu performansından yararlanamaz. Modern tarayıcılarda daha iyi bir performans için $("saf-css-selector").eq(index) şeklinde kullanınız.

Örnekler:

3üncü ≪td> elemanını bul.

<table border="1">
   <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
   <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
   <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
 
<script>
   $( "td:eq( 2 )" ).css( "color", "red" );
</script>

TD #0	TD #1	TD #2
TD #3	TD #4	TD #5
TD #6	TD #7	TD #8

:eq() setten tek bir eleman döner, :nth-child() ise setteki her eleman için bir seçim yapar. :eq() ile benzer bir işlem için de .each() metodu kullanılmıştır.

<ul class="nav">
   <li>List 1, item 1</li>
   <li>List 1, item 2</li>
   <li>List 1, item 3</li>
</ul>
<ul class="nav">
   <li>List 2, item 1</li>
   <li>List 2, item 2</li>
   <li>List 2, item 3</li>
</ul>
 
<script>
   // Tek bir <li> elemana sarı arka renk ver
   $( "ul.nav li:eq(1)" ).css( "backgroundColor", "#ff0" );
 
   // <ul class="nav"> içinde ikinci <li> elemanlara italik yazı yap
   $( "ul.nav" ).each(function( index ) {
      $( this ).find( "li:eq(1)" ).css( "fontStyle", "italic" );
   });
 
   // <ul class="nav"> içindeki ikinci <li> torunlara 
   // kırmızı yazı rengi uygula
   $( "ul.nav li:nth-child(2)" ).css( "color", "red" );
</script>

List 1, item 1
List 1, item 2
List 1, item 3

List 2, item 1
List 2, item 2
List 2, item 3

Geri doğru sayarak List 2 , Eleman 2'yi renklendir.

<style>
   .foo {
      color: blue;
      background-color: yellow;
   }
</style>

<ul class="nav">
   <li>List 1, item 1</li>
   <li>List 1, item 2</li>
   <li>List 1, item 3</li>
</ul>
<ul class="nav">
   <li>List 2, item 1</li>
   <li>List 2, item 2</li>
   <li>List 2, item 3</li>
</ul>
 
<script>
   $( "li:eq(-2)" ).addClass( "foo" )
</script>

List 1, item 1
List 1, item 2
List 1, item 3

List 2, item 1
List 2, item 2
List 2, item 3