デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

:even偶数番目の要素を選択

構文

偶数番目の要素を選択
$(":even")ver1.0〜
※:(コロン)を忘れないように注意しましょう。
※インデックス番号は0から数え始めることに注意。
※0は偶数として扱われます。

機能

:(コロン)に続けてevenを設定するとインデックス番号が偶数番目の要素を選択します。

解説

偶数番目の要素を選択します

サンプル(even/01.html)を開いてbody内にdiv要素が4つあることを確認してください。jQueryは以下の様に記述され、複数のセレクタ(and)を利用してdiv要素と組みあわせました。そのためbuttonをクリックするとdiv要素のうち偶数番目のものを選択します。選択した要素はcssメソッドを利用して背景色を緑にします。

$("button").click(function(){
	$("div:even").css("background-color","#9F9");
});

結果として、buttonをクリックすると0番目と2番目のdiv要素が選択され、背景色が緑になります。インデックス番号(要素の番号)は0からカウントすることに注意してください。0番目の要素は偶数として扱われます。

ページ全体を通しての番号です

サンプル(even/02.html)を開いてbody内を確認して下さい。2種類のリスト(olとul)があり、それぞれ5つのli要素を持っています。jQueryは以下の様に記述され、複数のセレクタ(and)を利用してli要素と組みあわせました。そのためbuttonをクリックするとliの偶数番目の要素が選択されます。選択された要素はcssメソッドによって背景色がピンクになります。

$("button").click(function(){
	$("li:even").css("background-color","#FCC");
});

ul要素とol要素は異なるリストですがli要素は共通です。そのためページ全体を通してインデックス番号が振られます。その結果ul要素内にのみ着目すると奇数番目の要素が選択されているように見えてしまいます

ul要素とol要素に個別に偶数番目の要素を選択したい場合は:nth-childを利用します(ページ最下段の関連項目とメモを参照してください)。

ul要素内でのみli要素を選択するには?

サンプルeven/02.htmlではul要素とol要素を通して偶数番目のli要素が選択されましたが、ul要素内にあるli要素だけを選択したい場合はどうすればよいでしょうか?サンプル(even/03.html)を開いてbody内の構成がeven/02.htmlと同じことを確認してください。

jQueryは以下の様に記述され、>(子要素)を利用して、ul要素の子要素のli要素だけを対象にしました。これでul要素内にあるliの偶数番目の要素だけが選択されます。

$("button").click(function(){
	$("ul>li:even").css("background-color","#FCC");
});

サンプルeven/03.htmlではul要素内にli要素しかないので、li要素の記述は省略しても同じです。
サンプル(even/03b.html)を開いてjQueryが以下の様に変更されていることを確認して下さい。しかし選択される要素はサンプルeven/03.htmlと同じになります。

$("button").click(function(){
	$("ul>:even").css("background-color","#FCC");
});

関連項目

奇数番目の要素を選択する:oddと合わせて覚えると良いでしょう。
子要素ごとに選択したい場合(サンプルではolとulで個別に偶数番目のliを選択したい場合)は:nth-childの引数にevenを利用します(ただしindex番号が1から始まるので、実際は引数にoddを設定することになります)。

メモ

関連項目で紹介した:nth-childを利用したサンプルを紹介します。サンプル(even/test01.html)を開いてhtmlの構成はeven/03.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、セレクタに:nth-childを利用しています。:nth-childの場合はインデックス番号が1から始まるため、引数はevenではなくoddになります。

$("button").click(function(){
	$("li:nth-child(odd)").css("background-color","#FCC");
});

結果として、buttonをクリックするとul要素とol要素で「個別」にli要素の偶数番目が選択されます。