:nth-child() Seçicisi

nth-child selector

Açıklama : Ebeveyninin n'inci çocuğu olan elemanları seçer.

jQuery( ":nth-child(index/even/odd/equation)" ) Eklendiği Versiyon 1.1.4

index : Eşleşecek çocuğun index'i, 1'den başlayan sayma yapılır. even ve odd stringi de parametre verilebilir ya da bir eşitlik (mesela :nth-child(even) veya :nth-child(4n) ).

JQuery :nth- seçicilerini CSS seçicilerden uyarladığı için index değeri 1'den başlar. .first() veya .eq() gibi metodlar JavaScript kullandığı için sıfır temelli index değerleri kullanırlar. İki tane <li> elemanı olan <ul> listesine $("li:nth-child(1)") seçicisi ilk liste elemanını seçerken $("li").eq(1) ikinci liste elemanını seçer.

Bu :nth-child(n) sahte sınıfı kolayca .eq( n ) metod kullanımı ile karıştırılır. Ancak aralarında dramatik farklar vardır. :nth-child(n) verilen seçicinin çocukları içinde verilen kritere göre sayarak elemanları bulurken, .eq( n ) metodu kendisine verilen eleman seti içerisinde sayar, çocuktur, büyüktür bakmaz. Birde ilki 1 temelli ikincisi sıfır temelli sayar.

Ayrıntılı bilgi W3C CSS specification dökümanına bakınız.

Örnekler:

Her eşleşen ul içindeki ikinci li elemanını bul ve not et.

<style>
   div { float: left; }
   span { color: blue; }
</style>
<div>
   <ul>
      <li>John</li><li>Karl</li><li>Brandon</li>
   </ul>
</div>
<div>
   <ul>
      <li>Sam</li>
   </ul>
</div>
<div>
   <ul>
      <li>Glen</li><li>Tane</li>
      <li>Ralph</li><li>David</li>
   </ul>
</div>
<script>
   $("ul li:nth-child(2)").append( "<span> - 2nd!</span>" );
</script>

John
Karl
Brandon

Glen
Tane
Ralph
David

Farklı string değerler nasıl çalışıyor, verilen set üzerinde sayım yapan even ve odd metodlarından farklı olarak nth-child aynı ebeveynin çocuklarında sayım yapar.

<style>
   button {
      display: block; width: 110px;
      font-size: 12px;
   }
   div {
      float: left; margin: 10px;
      font-size: 10px;
      border: 1px solid black;
   }
   span {
      color: blue;
      font-size: 18px;
   }
   #inner { color: red; }
   td {
      width: 60px;
      text-align: center;
   }
</style>
<div>
   <button>:nth-child(even)</button>
   <button>:nth-child(odd)</button>
   <button>:nth-child(3n)</button>
   <button>:nth-child(2)</button>
</div>
<div>
   <button>:nth-child(3n+1)</button>
   <button>:nth-child(3n+2)</button>
   <button data-method="even">.even()</button>
   <button data-method="odd">.odd()</button>
</div>
<div>
   <table>
      <tr><td>John</td></tr>
      <tr><td>Karl</td></tr>
      <tr><td>Brandon</td></tr>
      <tr><td>Benjamin</td></tr>
   </table>
</div>
<div>
   <table>
      <tr><td>Sam</td></tr>
   </table>
</div>
<div>
   <table>
      <tr><td>Glen</td></tr>
      <tr><td>Tane</td></tr>
      <tr><td>Ralph</td></tr>
      <tr><td>David</td></tr>
      <tr><td>Mike</td></tr>
      <tr><td>Dan</td></tr>
   </table>
</div>
<span>tr<span id="inner"></span></span>
 
<script>
   $("button").on("click", function() {
      var str = $(this).text();
      var method = $(this).attr("data-method");
      $("tr").css("background", "white");
      if (method) {
         $("tr")[ method ]().css("background", "#ff0000");
      } else {
         $("tr" + str).css("background", "#ff0000");
      }
      $( "#inner" ).text( str );
   });
</script>

John

Karl

Brandon

Benjamin

Sam

Glen

Tane

Ralph

David

Mike

Dan