jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery の基礎 > 巡回 (トラバーシング)

巡回 (トラバーシング)

巡回 (トラバーシング) とタイトルをつけましたが、ここでは DOM ノードの親子関係やノードの最初、最後といったツリー構造を意識して操作を行う場合を考えます。

メソッドの名前はたいてい直感的です。

例えば parent() メソッドでは特定の要素の親要素が取得できます。子要素 (の集合) は children()、同じレベルの要素は siblings() で取得可能です。

また特定の集合からさらに条件を絞る場合は find() メソッドを用います。

この辺は名前で大抵わかると思います。

children() を用いて子要素に操作を行う

具体例として、次の例をみてみましょう。

  • Android
  • Chromebook
  • Google App Engine

ここでは、 children() メソッドを用いて、 ID が ul1 である ul 要素の子要素 (三つの li) を取得して、赤色のボーダーを設定しています。コードは次のようになります。

$('#button1').click(function(){
	$('#ul1').children().css('border', '1px solid #f00');
});

複数の要素に対する操作なのですが、一行で済んでいます。まるで SQL のクエリーのように集合に対する操作と考えるとわかりやすいかもしれません。

end() は最後尾要素ではなく、最後にフィルタリング操作を行った対象の要素

大抵のネーミングが直感的だと言いましたが、 逆に私があまり直感的ではないと思うメソッドがこれです。 end() です。

end() は最後のフィルタリング操作を行った対象の要素を表します。具体例でみてみましょう。

  • Android
  • Windows
  • iPhone
  • Linux
  • iPad

コードは次のようになります。

$('#button2').click(function(){
	$('#ul2').find('.smartphone').css('color','#080')
	.end().find('.smartphone').css('font-size', '20px');
});

ここでは、 ID が ul2 である ul 要素から find メソッドのセレクター '.smartphone' で選択した要素に対して css の操作を行います。 さらに同じ要素 (#ul2) を対象にして、またフィルタ操作を行って要素を取得してまた操作を行います。 最初の操作では色 (color) を深緑 (#080) に変えて、次にサイズ (font-size) を大きめに設定しています。

first で最初の要素を取得

ついでに first の動きもみておきましょう。

上の例のリストの最初の要素をとりだして、それの色を変えるコードは次の通りです。

$('#button3').click(function(){
	$('#ul2').find('.smartphone').first().css('color','#f00');
});

ホーム > jQuery の基礎 > 巡回 (トラバーシング)
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門