デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

thisから辿る

概要

イベントが発生した要素以外を操作する

コンテンツを作成する際、イベントが発生した要素に関連した要素を操作したい場合があります。ここでは、そのような時に利用するトラバースという仕組みについて説明します。

トラバース(Traversing)とは
現在選択されている要素を変更すること。jQueryではメソッドを利用することで実現できます。
リファレンス:Traversing目次

解説

イベントが発生した要素以外を操作

まずは「イベントが発生した要素に関連した要素を操作」しなければならないケースを紹介します。それは前回紹介したサンプル(effect/04.html)です。このサンプルで着目する点は、以下の様にイベントを設定した要素(class属性がclickArea)と、操作する要素(class属性がtextArea)が異なる点です。

$(".clickArea").click(function (){
	$(".textArea").slideToggle();
});

このサンプルには問題はないのですが、イベントを設定した要素と操作する要素が異なる処理が複数あると問題が生じるのです。

問題点を確認

サンプル(trav/01.html)のソースを開いてjQueryはeffect/04.htmlと全く同じ事を確認してください。しかしbody内の構成は開閉メニューが3つに増えています。

<div class="clickArea">click me.</div>
<div class="textArea">いろは...せすん</div>
<br>
<div class="clickArea">click me.</div>
<div class="textArea">いろは...せすん</div>
<br>
<div class="clickArea">click me.</div>
<div 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要素に選択が変更されます。

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

結果として、青いdiv要素をクリックすると直下のグレーのdiv要素だけが開閉するようになります。このようにトラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。jQueryのトラバースは充実しているので、どの様なメソッドがあるか簡単に確認しておくと良いでしょう。
リファレンス:Traversing目次

メモ

兄弟・親・子・先祖・子孫

トラバースと合わせて覚えておくことに、相対的な要素の名称があります。まずは「兄弟要素」ですが、これは同じ階層にある要素のことです。例えば以下の様なリストがある時、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要素が子孫要素となります。

<div id="g1">
	<div id="g2">
		<divid="g3">
			<div id="g4">
				<div id="g5"></div>
			</div>
		</div>
	</div>
</div>

前回はフェードやスライドの演出が簡単に作成できることを説明しましたが、次回は汎用的なアニメを作成できるanimateメソッドについて説明します。