- 索引
- 1章:jQuery入門
-
- ├ jQueryのメリット
- ├ readyイベント
- ├ オブジェクトについて
- ├ メソッドについて
- ├ 情報の取得
- ├ イベント(1)
- ├ イベント(2)
- └ 初歩なサンプル
- 2章:jQuery基礎
-
- ├ thisについて(1)
- ├ thisについて(2)
- ├ jQueryとDOM要素
- ├ 簡単な演出
- ├ thisから辿る
- ├ 汎用的なアニメ(1)
- ├ 汎用的なアニメ(2)
- ├ アニメの停止
- ├ アニメを管理する仕組み
- └ 汎用的なアニメ(3)
- 3章:jQuery発展
-
- ├ イベントフロー(1)
- ├ イベントフロー(2)
- ├ イベントフロー(3)
- ├ 画像のプリロード
- ├ jQueryの高速化
- └ メソッドチェーン
- 番外編:研究
-
- ├ イベントを外す
- ├ cssアニメとの連携(1)
- ├ cssアニメとの連携(2)
- ├ cssアニメとの連携(3)
- ├ セレクタの自作(1)
- ├ セレクタの自作(2)
- ├ クロージャ(1)
- ├ クロージャ(2)
- └ クロージャ(3)
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メソッドについて説明します。
次のページ:汎用的なアニメ(1)