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

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

:odd奇数番目の要素を選択

構文

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

機能

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

解説

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連項目

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

メモ

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

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

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

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