jQuery入門講座使い方-thisから辿る

thisから辿る

トラバージング

jQueryにはセレクタを変更するTraversingという仕組みがあります。これをthisと合わせて利用すると複数の要素を効率よく操作することができます。まずはTraversingを利用しない例を確認します。サンプル（03/03_01.html）を開いて下さい。

jQueryは前回のサンプル（03/02_02.html）と同じなのですが、buttonDivとtargetDivの組合せが３セットに増えています。どれでも良いのでbuttonDivをクリックしてみてください。jQueryでは以下の様にセレクタが".targetDiv"となっているので、すべてのtargetDivが閉じてしまいます。

$(".buttonDiv").click(function () {
	$(".targetDiv").slideToggle();
});

これではメニューとして成立しません。ここで２章のイベントで紹介したthisを利用したいのですが、２章のサンプルと異なり、今回はクリックされたボタン（buttonDiv）と操作する対象（targetDiv）は別なのでthisだけでは対応できません（セレクタにthisを指定したらクリックされたbuttonDivがスライドしてしまいます）。
そこでTraversingのnextを合わせて利用します。

次の要素を選択するnext

サンプル（03/03_02.html）を開いてjQueryを確認してください。以下の様にまずセレクタでthis（クリックが発生した要素）を設定し、その次にTraversingのnextが書いてあります。nextはセレクタが選択した要素（今回はthis）の次に存在する直近の要素（今回は.targetDiv）を選択します。実際にbuttonDivをクリックすると、その次にある直近のtargetDivだけが開閉するはずです。Traversingの構文はメソッドと同じなので、後ろに（）が必要です。忘れないようにしましょう。

$(".buttonDiv").click(function () {
	$(this).next().slideToggle();
});

トラバージング（Traversing）: セレクタに続けて設定することで、特定の条件に従った（nextなら次の要素など）別の要素を選択する仕組み。構文としてはメソッドと同じで、後ろに（）を伴います。

子の要素を選択するchildren

他のTraversingのサンプルを確認しましょう。次に紹介するchildrenはセレクタに含まれる子要素に選択を移します。サンプル（03/03_03.html）を開いて、body内のdivの構成を確認してください。このサンプルでは操作する対象targetDivがボタンbuttonDiv内に含まれているのがポイントです。

このような場合はnextではなく、以下の様にchildrenを利用することで、セレクタが選択した要素内にある要素を選択することができます。このサンプルではnextの例と異なり青いdiv領域だけでなく灰色の領域をクリックしてもスライドします。これはbuttonDivがtargetDivを内包しているためです。クリックできる面積が広いので操作しやすいかもしれません。

$(".buttonDiv").click(function () {
	$(this).children().slideToggle();
});

トラバージングの引数

トラバージングの中には引数を設定して、より細かく指定して選択できるものがあります。childrenは引数で要素を指定すればセレクタ内の特定の要素だけ操作できます。サンプル（03/03_04.html）を開いて、body内のdivの構成を確認してください。buttonDiv内にtargetDivの他にdummyDivが追加されています。

このサンプルではchildrenに引数が設定されていないので、this（クリックされたボタン）内にある全ての要素がスライドされます。次にサンプル（03/03_05.html）を開いて、以下の様にchildrenに引数が設定されていることを確認してください。このサンプルでは引数でtargetDivと指定してあるので、targetDivしかスライドしません。dummyDivは表示されたままになります。

$(".buttonDiv").click(function () {
	$(this).children(".targetDiv").slideToggle();
});

トラバージングは色々種類があるので、一度はリファレンス（未完成のためリンク無し）を確認して、どのような処理が可能か見ておくと良いでしょう。
次回は汎用的にアニメ処理を実現するanimateメソッドを紹介します。

次のページ：animateメソッド(1)