クロージャ(3)thisから辿る概要イベントが発生した要素以外を操作するコンテンツを作成する際、イベントが発生した要素に関連した要素を操作したい場合があります。ここでは、そのような時に利用するトラバースという仕組みについて説明します。トラバース(Traversing)とは現在選択されている要素を変更すること。jQueryではメソッドを利用することで実現できます。解説イベントが発生した要素以外を操作まずは「イベントが発生した要素に関連した要素を操作」しなければならないケースを紹介します。それは前回紹介したサンプル(effect/04.html)です。このサンプルで着目する点は、以下の様にイベントを設定した要素(class属性がclickArea)と、操作する要素(class属性がtextArea)が異なる点です。(){$(".textArea").slideToggle();});このサンプルには問題はないのですが、イベントを設定した要素と操作する要素が異なる処理が複数あると問題が生じるのです。問題点を確認サンプル(trav/01.html)のソースを開いてjQueryはeffect/04.htmlと全く同じ事を確認してください。body内の構成は開閉メニューが3つに増えています。class="textArea">いろは...せすん</div><br>このサンプルでは、青いdiv要素(class属性がclickArea)のどれをクリックしても、すべてのグレーのdiv要素(class属性がtextArea)が開閉してしまいます。これでは困ります、クリックしたdiv要素の下にあるdiv要素だけを開閉するようにしなければなりません。これまでボタンが複数あるときは「this」を利用して問題を回避しましたが、今回は操作する対象がイベントが発生した要素ではないためトラバースが必要なのです。nextメソッドです。これを利用すると、イベントが発生した要素の次の兄弟要素に選択が変更されます。サンプル(trav/02.html)のソースを開いて、body内の構成がtrav/01.htmlから変更していないことを確認してください。jQueryは以下の様に記述されています。ポイントは2行目で、まずthisを利用してクリックされた要素を選択します。nextメソッドを利用することで、次の兄弟要素であるグレーのdiv要素に選択が変更されます。(){$(this).next().slideToggle();});結果として、青いdiv要素をクリックすると直下のグレーのdiv要素だけが開閉するようになります。このようにトラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。jQueryのトラバースは充実しているので、どの様なメソッドがあるか簡単に確認しておくと良いでしょう。トラバースと合わせて覚えておくことに、相対的な要素の名称があります。「兄弟要素」ですが、これは同じ階層にある要素のことです。以下の様なリストがある時、li要素はすべて同じ階層にあるため兄弟要素になります(タグは同じでなくても構いません、階層がポイントなのです)。<ul><li>リスト要素1</li><li>リスト要素2</li><li>リスト要素3</li></ul>続いては「親要素」で、これは1階層上の要素のことです。上記の例では、li要素の親要素はul要素になります。「子要素」は1階層下の要素のことです。上記の例では、ul要素の子要素がli要素になります。「先祖要素」は自分よりも上の階層の要素すべてを指します。以下の様な構造があった場合、id属性がg3のdiv要素から見てid属性がg1とg2のdiv要素が先祖要素となります。「子孫要素」は自分よりも下の階層の要素すべてを指します。下の例では、id属性がg3のdiv要素から見てid属性がg4とg5のdiv要素が子孫要素となります。id="g5"></div></div></div></div></div>前回はフェードやスライドの演出が簡単に作成できることを説明しましたが、次回は汎用的なアニメを作成できるanimateメソッドについて説明します。