巡回 (トラバーシング)

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

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

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

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

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

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

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

<ul id='ul1'>
    <li>Android</li>
    <li>Chromebook</li>
    <li>Google App Engine</li>
</ul>

このとき、次のようにします。

$('#ul1').children().css('border', '1px solid #f00');

すると、 children() メソッドを用いて、 ID が ul1 である ul 要素の子要素 (三つの li) を取得して、赤色のボーダーが設定されます。

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

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

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

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

<ul id='ul2'>
    <li class='smartphone'>Android</li>
    <li class='os'>Windows</li>
    <li class='smartphone'>iPhone</li>
    <li class='os'>Linux</li>
    <li class='tablet'>iPad</li>
</ul>

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

$('#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 の動きもみておきましょう。

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

$('#ul2').find('.smartphone').first().css('color','#f00');