株式会社RJC　技術サイト

クラスセレクターを使ってみよう！

先ほどはIDセレクターを使いましたが、今度はクラスセレクターを使ってみましょう。
名前の通り、class属性の値で要素を探します。「属性」や「要素」が何だったか忘れてしまった人はエレメントセレクターのページや用語集を読み返しましょう。
「1_5.html」のソースを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery入門研修｜クラスセレクター実践</title>
</head>
<body>
	<a href="http://jquery.com/" id="foo" class="bar">jQuery</a>
	<ul>
		<li class="bar">List Item BAR</li>
		<li>List Item BAZ</li>
		<li class="bar">List Item QUX</li>
	<ul>
	<script src="../js/jquery-1.11.2.min.js"></script>
	<script>
		$(function() {
			// class"bar"を探そう！
		});
	</script>
</body>
</html>

早速ですが、実践していきましょう。$関数に「文字列」を渡すとセレクターにな基本は変わりません。
そしてクラスセレクターを使う場合は、文字列の先頭に「.」を付けclass属性の値を指定します。
つまり、$関数に「.で始まる文字列」を渡すとクラスセレクターになります。
戻り値も同じです。$objが返ってきます。
それではclassがbarの$objをクラスセレクターで取得して、$objとインデックス0から2までのエレメントオブジェクトの4つをコンソールに出力してみましょう。

$(function() {
	// class"bar"を探そう！
	var $bar = $(".bar");
	console.log($bar);
	console.log($bar[0]);
	console.log($bar[1]);
	console.log($bar[2]);
});

ここでのミソは$関数を何度も呼ばずに、変数に保持している点です。
セレクターを何度も呼ぶと、その度に該当する要素を探すので、今回の例だと、4回もドキュメント内を走査する処理が走ることになります。
逆に要素を追加・削除し、改めて該当する要素を探し直したい時は、再度セレクターを使う必要があります。
そして、「$bar」はただの変数名ですが、先頭に$を付けて「この変数はjQueryオブジェクトだよ」と示しています。
JavaScriptにおいて「$」はただの「文字」だと言うことを忘れないでください。
それではここをクリックしてコンソールを見てみましょう。
まずは$objのlengthを見てみましょう。ちゃんと3になってますか？次に、classがbarの要素が出力されていますか？
ちなみに$objにはeach関数が用意されています。each関数を使えば次のように書き換えることができます。

$(function() {
	// class"bar"を探そう！
	var bar = $(".bar");
	console.log(bar);
	bar.each(function(index, element) {
		console.log(element);
	});
});

each関数はセレクターに一致した要素群に対して繰り返し処理を行います。詳細が知りたい方は公式APIを見てください。
1つだけ、「element」はプレーンなエレメントオブジェクトであることに注意してください。jQueryオブジェクトではありません。本当によく間違えます。

セレクターのまとめ

これまでに解説した3種類のセレクターについて内容をまとめます。
どれも使う機会が多いのでしっかりと覚えましょう。

$関数に文字列を渡すとセレクターになる
$関数に文字列でタグ名を指定するとエレメントセレクターになる
$関数に「#」で始まる文字列を指定するとIDセレクターになる
$関数に「.」で始まる文字列を指定するとクラスセレクターになる
セレクターの戻り値はjQueryオブジェクト

他にも様々なセレクターがありますが、それは追々ご紹介します。
次のページではセレクターで取得した要素にイベント処理を追加する方法を解説します。

TOPへ戻る