jQuery入門講座使い方-セレクタの絞り込み

セレクタの絞り込み

cssに準拠した仕様

以前紹介した３つのdivに文字を設定するサンプル（01/02_01.html）ですが、すべてのdivが同じように変更されては困ってしまいます。ですので、このページでは操作する対象を細かく絞り込む方法を紹介したいと思います。とはいえ対応はシンプルです。なぜならCSS（ver1〜3）と同じように設定できるからです。この特長からjQueryはデザイナーやコーダーにとっても習得がしやすいといえるでしょう。

具体的なサンプルで確認しましょう。以下のサンプル（01/04_01.html）を開いてソースを確認して下さい。3つあるdivタグのうち１つだけid（test）が設定してあります。

つぎにjQueryのセレクタの部分を確認して下さい。以下の様になっておりcssの指定方法と全く同じ構文で指定できることが確認できます（このcss設定はidがtestのdivタグという意味になります）。

jQuery(document).ready(function () {
	jQuery("div#test").text("hello world");	
});

css3のセレクタも利用可能

jQueryはcss3のセレクタにも対応しています。例えばcss3には、３番目など特定の順番の要素だけを選択できる:nth-child()という疑似要素がありますが、jQueryでも利用できます。そしてjQueryの凄い点として、IE7などcss3に対応していないブラウザでも（jQueryのセレクタとして利用する時だけですが）css3のセレクタが利用できることです。

実際にcss3のセレクタを利用したサンプル（01/04_02.html）を確認してみましょう。サンプルを開いてソースを確認して下さい。まずdivタグの部分には、どのdivタグの内容が変わったか確認しやすいようにaaa,bbb,cccと個別の文字が設定されています。

つぎにjQueryのセレクタの部分を確認して下さい。以下の様に:nth-child()が利用されています。この疑似要素は（）に指定した順番の要素を選択します。結果として２番目のdivタグの内容が変更されます。IE7の環境がある方はIE7でも確認して下さい。css3に対応していないIE7でも機能しているのが確認できます。

jQuery(document).ready(function () {
	jQuery("div:nth-child(2)").text("hello world");	
});

リファレンスを活用しよう

css3のセレクタに関してはIE6やIE7などが対応していないため、まだ学習を始めていない方も多いと思います。しかしjQueryでは利用できるので、この機会に学んでおきましょう。css3のセレクタは非常にたくさんありますが、リファレンスにすべて紹介しているので、一度すべてに目を通しておくことをお薦めします。
→リファレンス：セレクタ（未完成のためリンク無し）

捕捉：指定する順番に注意

最後に初心者が間違いがちな処理の順番について説明します。サンプル（01/04_03.html）ではdivに対して２種類の操作を行っています。このサンプルでは、すべてのdivに「divです」と表示させ、２番目のdivだけ特別に「2番目のdiv」と表示させようとしたものの、開いてみると全て「divです」となってしまっています。

jQuery(document).ready(function () {
	jQuery("div:nth-child(2)").text("2番目のdiv");	
	jQuery("div").text("divです");	
});

これは処理の順番が問題なのです。2行目で、２番目のdivを「"2番目のdiv」としても、3行目の処理によって、すべて「divです」に上書きされてしまうのです。ですからサンプル（01/04_04.html）のように、最初に全てのdivを操作してから、２番目のdivを操作するようにしなければいけません。

jQueryでは各要素の順番がきちんと管理されています。今回紹介したnth-childも順番が管理されているからこそ可能なのです。次回は、もう少し詳しく要素の順番による管理を説明します。

次のページ：インデックス番号