jQuery入門道場 jQueryの使い方

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要素が選択される

上記の例だとフィルターを使っている意味がありませんが、(最初から、$("li.first")と書けば良いため)使い方はお分かりいただけるかと思います。