:even【インデックス要素 (偶数)】
:odd 【インデックス要素 (奇数)】

メモ

  • 偶数・奇数番目のインデックス(0 オリジン)により要素を選択
    • :even：偶数番目のインデックス要素 (最初の該当要素も偶数番目)
    • :odd：奇数番目のインデックス要素
  • 順序はドキュメントの出現順
  • パフォーマンス
    • ネイティブ DOM querySelectorAll() 未使用の為、低速
      純粋なCSSセレクタを使用後、 .filter(":even")・.filter(":odd") を使用した方が高速  ( 例 参照)

構文

【インデックス要素 (偶数)】
jQuery( ":even" )1.0


【インデックス要素 (奇数)】
jQuery( ":odd" )1.0

関連

例

<ol id="id1">
  <li>項目
  <li>項目
  <li>項目
  <li>項目
  <li>項目
</ol>

<script>
$("#id1 li:even").css("color", "red").append( " (偶数)" );
$("#id1 li:odd").css("color", "blue").append( " (奇数)" );
</script>
  1. 項目
  2. 項目
  3. 項目
  4. 項目
  5. 項目 
<table id="id2" border="1" style="border-collapse:collapse;">
  <tr><th>th (0)<th>th<th>th<th>th</tr>
  <tr><th>th (1)<td>td<td>td<td>td</tr>
  <tr><th>th (2)<td>td<td>td<td>td</tr>
  <tr><th>th (3)<td>td<td>td<td>td</tr>
  <tr><th>th (4)<td>td<td>td<td>td</tr>
</table>

<script>
$("#id2 tr:even").css("background-color", "lightyellow");
$("#id2 tr:odd").css("background-color", "lightblue");
</script>

th (0)ththth
th (1)tdtdtd
th (2)tdtdtd
th (3)tdtdtd
th (4)tdtdtd

<ol id="id3">
  <li>項目
  <li>項目
  <li>項目
  <li>項目
  <li>項目
</ol>

<script>
$("#id3 li").filter(":even").css("color", "red").append( " (偶数)" );
$("#id3 li").filter(":odd").css("color", "blue").append( " (奇数)" );
</script>
  1. 項目
  2. 項目
  3. 項目
  4. 項目
  5. 項目