jQueryでのthisの使い方〜覚えると楽しくなる

jQueryにおけるthisとは
1. 使い方
アコーディオンを作成
1. jQueryコードの解説

jQueryにおけるthisとは

thisとはどんな時に使用すればよいのでしょうか。
thisはイベントで設定したfunction内で利用すると、イベントが発生した要素を指します。

使い方

$(function(){
	$(セレクター).click(function(){
		$(this).メソッド();
	});
});

例えば次の例ではクリックしたli要素のみ「クリックしました！」と表示されます。
サンプル

$(function(){
	$("li").click(function(){
		$(this).text("クリックしました！");
		$("li").not(this).text("クリックされていません。");
	});
}

<ul>
    <li>クリックされていません。</li>
    <li>クリックされていません。</li>
    <li>クリックされていません。</li>
    <li>クリックされていません。</li>
    <li>クリックされていません。</li>
</ul>

$(“li”).clickでli要素がクリックされたら、thisつまりクリックされたli要素のテキストが「クリックしました！」と入れ替わります。テキストの入れ替えは.text()メソッドで行っています。
その次の$(“li”).not(this)では、thisつまりクリックされたli要素以外のli要素のテキストを「クリックされていません。」と入れ替えています。

この仕組みを覚えるとアイデア次第でデザインの幅が広がりますよね。

アコーディオンを作成

dl要素を使用してアコーディオンを作成してみましょう。
サンプル

$(function(){
	$("dd:not(:first)").css("display","none");
	$("dl dt").click(function(){
		if($("+dd",this).css("display")=="none"){
			$("dd").slideUp("slow");
			$("+dd",this).slideDown("slow");
		}
	});
});

<dl>
<dt>第１のdt要素</dt>
<dd><p>ああああああああああああああああああああああああああ</p></dd>
<dt>第２のdt要素</dt>
<dd><p>いいいいいいいいいいいいいいいいいいいいいいいいいい</p></dd>
<dt>第３のdt要素</dt>
<dd><p>うううううううううううううううううううううううううう</p></dd>
</dl>

jQueryコードの解説

```
$("dd:not(:first)").css("display","none");
```
この行が意味していることはdd要素で一番最初のdd要素以外のdd要素についてはcssのdisplayプロパティをnoneにしなさいという命令です。
```
$("dl dt").click(function(){
```
この行はdl要素の中のdt要素がクリックされたら以下の命令を実行しなさいというイベントの設定です。
```
if($("+dd",this).css("display")=="none"){
```
この行が分かりづらいですね。まず、jQueryオブジェクトを作成する$()には第2引数があることを思い出してください。第２引数「コンテキスト」がthisすなわちそれはクリックされたdt要素の事を指しています。+ddはCSSの隣接セレクタです。それは要素と要素が直接隣接している場合（直後の弟）に適用されるセレクタです。今回の場合第2引数のthisすなわちクリックされたdt要素の直後にあるdd要素のことを指しています。そしてそのdd要素が「もしdisplayプロパティがnoneなら」とif文の条件として使用されているのです。
第１のdtがクリックされたら「あああああああ」のddを、第2のdtがクリックされたら「いいいいいいい」のddを、第3のdtがクリックされたら「ううううううう」のddを何らかの命令で動かしたいわけです。
たった1行の文ですがパズルみたいですね。なるほどとわかるまでサンプルを利用して動作させてみて、しっかりと意味を理解してください。これがわかると嬉しくなるはずです。
```
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
```
こちらは具体的に実行したい命令文です。上のslideUp()メソッドは、先のif文がtrueならdd要素はすべてslideUp()つまり消してしまいなさい。という命令です。セレクターをddとすることでdd要素は全てとなるところがポイントです。こうすることでdd要素がいくつあってもよくなります。後々のコーディングが楽になりますよね。
次のslideDown()メソッドは、thisすなわちクリックされたdt要素の直後にあるdd要素はslideDownしなさい、つまり見えるように表示しなさいと命令しています。
その結果クリックしたdt要素のすぐ下のdd要素はたとえどこにあっても常に開くことになります。

アコーディオンの仕組みは工夫次第で用途が多いものです。しっかりと理解をして活用してみましょう。