連載
» 2009年10月09日 00時00分 公開

連載:jQuery逆引きリファレンス:第1回 セレクタ編 (13/25)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 条件に合致した要素セットの中から偶数/奇数番目の要素だけを取り出すには、:even/:oddフィルタを指定します。

 以下では、<tbody>要素配下の各行に対して背景色を設定する例です。偶数行にはAquaを、奇数行にはTealを、それぞれ適用します。

<script type="text/javascript">

$(function() {
  $('tbody > tr:odd').css('background-color', 'Teal');
  $('tbody > tr:even').css('background-color', 'Aqua');
});

</script>

……中略……

<table border="1">
<thead>
  <tr><th>構文</th><th>概要</th></tr>
</thead>
<tbody>
  <tr><td>#id</td><td>id値に合致</td></tr>
  <tr><td>.class</td><td>スタイルクラス名に合致</td></tr>
  <tr><td>tag</td><td>タグ名に合致</td></tr>
  <tr><td>*</td><td>全要素に合致</td></tr>
  <tr><td>selector, selector</td><td>セレクタのいずれかに合致</td></tr>
</tbody>
</table>

リスト013 偶数/奇数番目の要素だけを取得(OddEven.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト013の実行結果

 なお、インデックス番号は0始まりであり、:even/:oddもインデックス番号から奇数/偶数を判断している点に要注意です。ですから例えば:odd(奇数)フィルタは、インデックス番号が1、3、5……である行、実際には、2、4、6行目にマッチします。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。