5章　横断（Traversing）

この章で登場するメソッド一覧です。

横断（Traversing）

横断とは、セレクターによって選択した要素を都合により変更したい場合に使用します。あっちこっち行ったりするため、「横断」と呼んでいます。この横断によって、jQueryに現在選択されている要素は、「変化」します。それは、何かの操作対象が、その変化後の要素になるということです。1つ1つ見て行きましょう。

.first()

マッチ（選択）した要素の中から、最初の要素だけに対象を絞ります。
具体例で見てみましょう。

<ul>

  <li>太郎</li>

  <li>次郎</li>

  <li>三郎</li>

</ul>

$("li").css("font-weight", "bold").first().css("color", "red");

この結果は、以下のようになります。

.first()の手前まではいつも通りの操作です。LI要素全てを太文字に設定しています。そしてその後に、.first()とあり、ここでマッチした要素が、LI全てではなく、その最初の先頭の要素だけに変更されます。つまりここでは太郎のLIのみが選択された状態になり、続く処理は、それに対して行われます。よって、太郎のみが赤文字になりました。

もし最初から太郎だけが操作対象なら、セレクターの章で見たように、:firstフィルターが使えます。

$("li:first").css("font-weight", "bold").css("color", "red");

.last()

先ほどの.first()が、最初の先頭が選択されるのに対し、こちらは最後の要素が選択されます。

.eq()

.first()や.last()は、先頭と最後に限定でしたが、.eq(n)の形で、任意の位置を指定することができます。プログラミングらしく、0からスタートします。先ほどの.first()と同じHTMLを使って見てみましょう。

<ul>

  <li>太郎</li>

  <li>次郎</li>

  <li>三郎</li>

</ul>

$("li").eq(0);  // 太郎のLI要素が選択される

$("li").eq(2);  // 三郎のLI要素が選択される

$("li").eq(-1); // マイナスを使うと後ろから数える。つまり三郎のLI要素が選択される

.filter()

.filter(selector) の形で、対象をセレクターで絞り込むことができます。

<ul>

  <li class="first">太郎</li>

  <li>次郎</li>

  <li>三郎</li>

</ul>

$("li").filter(".first"); // 太郎のLI要素が選択される