:eq()【インデックス要素 (一致)】
:gt()【インデックス要素 (より大きい)】
:lt()【インデックス要素 (より小さい)】

メモ

  • 指定インデックス (index：0 オリジン)に対し、下記の要素を選択
    負のインデックス：末尾からのインデックス指定 (末尾の要素：-1) 1.8
    • :eq(index)：indexと一致する要素
    • :gt(index)：indexより大きい要素
    • :lt(index)：indexより小さい要素
  • パフォーマンス
    • ネイティブ DOM querySelectorAll() 未使用の為、低速
      純粋なCSSセレクタを使用後、 .eq(index) ・.slice(index + 1) ・.slice(0, index) を使用した方が高速

構文

jQuery( ":eq( index )" )  1.0
jQuery( ":eq( -index )" ) 1.8


jQuery( ":gt( index )" ) 1.0
jQuery( ":gt( -index )" ) 1.8


jQuery( ":lt( index )" ) 1.0
jQuery( ":lt( -index )" ) 1.8

引数説明
0 ≦ index先頭から (先頭：0)
-index ＜ 0末尾から (末尾：-1)

関連

例

<table id="id1" border="1" style="border-collapse:collapse;">
  <tr><th>th<th>th<th>th<th>th</tr>
  <tr><th>th<td>td (0 / -9)<td>td (1 / -8)<td>td (2 / -7)</tr>
  <tr><th>th<td>td (3 / -6)<td>td (4 / -5)<td>td (5 / -4)</tr>
  <tr><th>th<td>td (6 / -3)<td>td (7 / -2)<td>td (8 / -1)</tr>
</table>

<script>
$("#id1 td:eq(4)").css("color", "red");
$("#id1 td:gt(6)").css("background-color", "yellow");
$("#id1 td:lt(2)").css("background-color", "cyan");
</script>

thththth
thtd (0 / -9)td (1 / -8)td (2 / -7)
thtd (3 / -6)td (4 / -5)td (5 / -4)
thtd (6 / -3)td (7 / -2)td (8 / -1)

<table id="id2" border="1" style="border-collapse:collapse;">
  <tr><th>th<th>th<th>th<th>th</tr>
  <tr><th>th<td>td (0 / -9)<td>td (1 / -8)<td>td (2 / -7)</tr>
  <tr><th>th<td>td (3 / -6)<td>td (4 / -5)<td>td (5 / -4)</tr>
  <tr><th>th<td>td (6 / -3)<td>td (7 / -2)<td>td (8 / -1)</tr>
</table>

<script>
$("#id2 td:eq(-5)").css("color", "red");
$("#id2 td:gt(-3)").css("background-color", "yellow");
$("#id2 td:lt(-7)").css("background-color", "cyan");
</script>

thththth
thtd (0 / -9)td (1 / -8)td (2 / -7)
thtd (3 / -6)td (4 / -5)td (5 / -4)
thtd (6 / -3)td (7 / -2)td (8 / -1)

<table id="id3" border="1" style="border-collapse:collapse;">
  <tr><th>th<th>th<th>th<th>th</tr>
  <tr><th>th<td>td (0 / -9)<td>td (1 / -8)<td>td (2 / -7)</tr>
  <tr><th>th<td>td (3 / -6)<td>td (4 / -5)<td>td (5 / -4)</tr>
  <tr><th>th<td>td (6 / -3)<td>td (7 / -2)<td>td (8 / -1)</tr>
</table>

<script>
$("#id3 td").eq(4).css("color", "red");
$("#id3 td").slice(6 + 1).css("background-color", "yellow");
$("#id3 td").slice(0, 2).css("background-color", "cyan");
</script>

thththth
thtd (0 / -9)td (1 / -8)td (2 / -7)
thtd (3 / -6)td (4 / -5)td (5 / -4)
thtd (6 / -3)td (7 / -2)td (8 / -1)

<table id="id4" border="1" style="border-collapse:collapse;">
  <tr><th>th<th>th<th>th<th>th</tr>
  <tr><th>th<td>td (0 / -9)<td>td (1 / -8)<td>td (2 / -7)</tr>
  <tr><th>th<td>td (3 / -6)<td>td (4 / -5)<td>td (5 / -4)</tr>
  <tr><th>th<td>td (6 / -3)<td>td (7 / -2)<td>td (8 / -1)</tr>
</table>

<script>
$("#id4 td").eq(-5).css("color", "red");
$("#id4 td").slice(-3 + 1).css("background-color", "yellow");
$("#id4 td").slice(0, -7).css("background-color", "cyan");
</script>

thththth
thtd (0 / -9)td (1 / -8)td (2 / -7)
thtd (3 / -6)td (4 / -5)td (5 / -4)
thtd (6 / -3)td (7 / -2)td (8 / -1)