Lesson 5

複数の要素を操作（トラバース）

Lesson 5 Chapter 1
最初の要素を取得（first）

Lesson4では、「HTML操作系アクション」について学んできました。
さて、Lesson5では、jQueryが提供する重要な機能の1つである「トラバース」について学んでいきましょう。

トラバースとは

「トラバース」とは、複数の要素の中から条件に合致するものを絞り込んで、要素の取得や操作をすることができる機能です。
これまでのレッスンで学んできた内容を踏まえると、指定したい要素を「セレクタ」として設定し、その要素に対し、アクションを指定する、といった方法で操作を行っていました。
トラバースは、その指定したい要素にアクセスするための方法を提供する機能となります。
初めは、少々難しく感じるかもしれませんが、トラバースを使いこなせるようになることで、実装の幅は間違いなく広がります。このレッスンにて、しっかりと「トラバース」の活用方法について学んでいきましょう。

first()アクションによる最初の要素の取得

first()は、指定した要素にマッチしたものの中で、最初の要素のみを取得し、操作することができるアクションです。
文法としては、以下のように記述します。

jQuery
$('任意の要素').first();

それでは、以下にサンプルコードを載せましたので、挙動について確認していきましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素1</div>
    <div>divの要素2</div>
    <div>divの要素3</div>
    <div>divの要素4
    <div>divの要素5</div>
  </body>
</html>
<style>
  div {
    width:200px;
    height:50px;
    text-align:center;
    line-height:50px;
    background-color: aquamarine;
    font-size: 26px;
    margin-bottom: 10px;
  }
</style>
<script>
  let first = $("div").first();
  console.log(first.text());
</script>

上記のサンプルコードの処理について軽く説明をしますと、<body>要素内に<div>要素が5つ存在しています。この内、一番最初の<div>要素のみを取得するために、$("div").first();を実行しています。この処理により、区別の判断が付かない5つの<div>要素の中から、最初の<div>要素のみを取得することができるようになります。最後に、取得した要素のテキスト情報をコンソールに出力するようにしています。
では実際に、実行結果を確認してみましょう。

first.png sample.htmlの実行結果

実行した結果、ブラウザのコンソールにログには、先頭の<div>要素のテキスト情報である「divの要素1」が表示されることを確認することができました。

また、トラバースにより取得した要素に対し、なにかアクションを実行したい場合は、以下のように記述を行えばOKです。

jQuery
$('任意の要素').first().アクション();

例として、さきほどのサンプルコードでは、マッチした最初の<div>要素のテキスト情報を取得していましたが、その場合は以下のように記述します。

jQuery
$('div').first().text();

このように、トラバースを活用することで、より柔軟に特定の要素に絞ってアクセスすることが可能です。非常に強力な機能ですので、しっかりと理解していきましょう。

Lesson 5 Chapter 2
最後の要素を取得（last）

このチャプターでは、last()アクションについて学んでいきましょう。

last()アクションによる最後の要素の取得

last()は、指定した要素にマッチしたものの中で、最後の要素のみを取得し、操作することができるアクションです。
文法は、以下のように記述します。

jQuery
$('任意の要素').last();

以下にサンプルコードを記載します。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素1</div>
    <div>divの要素2</div>
    <div>divの要素3</div>
    <div>divの要素4
    <div>divの要素5</div>
  </body>
</html>
<style>
  div {
    width:200px;
    height:50px;
    text-align:center;
    line-height:50px;
    background-color: aquamarine;
    font-size: 26px;
    margin-bottom: 10px;
  }
</style>
<script>
  let last = $("div").last();
  console.log(last.text());
</script>

チャプター1の際のサンプルコードと内容はほぼ同じです。異なる点として、今回は、5つの<div>要素のうち、一番最後の<div>要素のみを取得したいため、$("div").last();を実行しています。
この処理により、区別の判断が付かない5つの<div>要素の中から、最後の<div>要素のみを取得することができるようになります。
では実際に、実行結果を確認してみましょう。

last.png sample.htmlの実行結果

実行した結果、ブラウザのコンソールにログには、期待通り、最後の<div>要素のテキスト情報である「divの要素5」が表示されていることを確認することができました。

実際に開発をしていると、該当する複数の共通の要素の中から最後の要素のみを取得したい、というケースがよく発生することがあります。その際に、last()アクションを使用することで、非常に簡単に、取得したい要素にアクセスすることができます。
このように、last()アクションは、first()アクションと同様に非常に役に立つことが多いので、しっかりと覚えておきましょう。

Lesson 5 Chapter 3
n番目の要素を取得（eq）

このチャプターでは、n番目の要素を取得するeq()アクションについての説明を行います。

eq()アクションによるn番目の要素の取得

eq()は、指定した要素にマッチしたものの中で、引数に指定したインデックス番号に該当する要素のみを取得し、操作することができるアクションです。
文法としては、以下のように記述します。

jQuery
$('任意の要素').eq('インデックス番号');

インデックス番号は、0から始まります。
つまり、最初の要素がインデックス番号0、2個目の要素がインデックス番号1...のように続きます。
最後の要素のインデックス番号は、「マッチしている要素の数-1」となります。

では、eq()アクションの挙動を確認することができるサンプルコードを以下に載せます。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素1</div>
    <div>divの要素2</div>
    <div>divの要素3</div>
    <div>divの要素4
    <div>divの要素5</div>
  </body>
</html>
<style>
  div {
    width:200px;
    height:50px;
    text-align:center;
    line-height:50px;
    background-color: aquamarine;
    font-size: 26px;
    margin-bottom: 10px;
  }
</style>
<script>
  $("div").eq(3).css("background-color", "orange");
</script>

今回は、例えば、5つ存在している<div>要素のうち、「4番目の要素のみ」を取得したいケースがあると仮定します。そこで、今回のサンプルコードでは、$("div").eq(3).css("background-color", "orange");というコードを実装しています。
上記のコードが実行されることにより、5つの<div>要素の中から、4番目の<div>要素のみを取得し、かつ、背景色がオレンジ色に変更されます。
では実際に、実行結果を確認してみましょう。

eq.png sample.htmlの実行結果

上記の通り、期待通りに、4番目の<div>要素に対してのみ、CSSのスタイルを適用することができました。
先述しましたが、インデックス番号は0から始まるため、4番目の<div>要素にアクセスするためには、$("div").eq(3);とする必要があります。
eq()アクションを使用する際は、引数に設定するインデックス番号の数字を間違えないように気をつけてください。

このように、eq()アクションを使用することで、ご自身の好きな順番の要素にのみスポットを当てて、処理を行うことができます。使いこなせると非常に便利な機能ですので、しっかりと覚えておきましょう。

Lesson 5 Chapter 4
その他のトラバース系アクション

これまでのチャプターを通して、fist()アクション、last()アクション、eq()アクションといったトラバースの基本的なアクションについて学んできました。
最後に、このチャプターでは、その他の便利なトラバース系アクションについて、2つほどピックアップし、紹介します。

next()アクションによる直後の兄弟要素の取得

next()は、指定した要素の直後に存在する兄弟要素（同じ階層に存在する要素）を取得し、操作をすることができるアクションです。
文法は以下のように記述します。

jQuery
$('任意の要素').next();

それでは、早速、以下のサンプルコードを参考に、next()アクションの挙動について確認していきましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
    <p>pの要素</p>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
  p {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aqua;
    font-size: 26px;
  }
</style>
<script>
  let next = $("div").next();
  console.log(next.text());
</script>

上記のサンプルコードについて説明をすると、今回は<body>要素内に<div>要素と<p>要素が存在しています。let next = $("div").next();のコードが実行されることで、指定した<div>要素の直後の兄弟要素である<p>要素を取得することができます。
また、<p>要素が期待通りに取得できているかを確認するために、console.log(next.text());のコードを記述し、取得した<p>要素のテキスト情報をログ出力するようにしています。
では実際に、実行結果を確認してみましょう。

next.png sample.htmlの実行結果

上記の通り、期待通りの結果を得ることができました。
このように、next()アクションを用いることで、アクセスしたい要素を直接指定することなく、直前の兄弟要素から相対的にアクセスすることができます。

続けて、next()アクションの反対の機能であるprev()アクションについて、説明を行います。

prev()アクションによる直前の兄弟要素の取得

prev()は、指定した要素の直前に存在する兄弟要素を取得し、操作をすることができるアクションです。
文法は以下のように記述します。

jQuery
$('任意の要素').prev();

それでは、prev()アクションを利用するサンプルコードを以下に用意しましたので、実際の挙動について確認していきましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
    <p>pの要素</p>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
  p {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aqua;
    font-size: 26px;
  }
</style>
<script>
  let prev = $("p").prev();
  console.log(prev.text());
</script>

上記のサンプルコードは、next()アクションの際のサンプルコードとほぼ同じ内容です。ただ、代わりに今回はlet prev = $("p").prev();というコードを記述しています。このコードが実行されることで、指定した<p>要素の直前の兄弟要素である<div>要素が取得されます。
また、console.log(prev.text());の処理により、取得した<div>要素のテキスト情報をログ出力しています。
以下に実行結果を表示します。

prev.png sample.htmlの実行結果

結果、上記の通り、<div>要素を取得し、そのテキスト情報をログ出力することができました。

以上のように、直前の要素を取得することのできるprev()アクションは、next()アクションと同様に、非常に汎用的で実際の開発でも役立つ便利なアクションです。
今回のチャプターで学んだ内容を生かし、是非使いこなせるようになっていきましょう。

さいごに

このレッスンでは、指定した要素から、相対的に要素の取得や操作をすることができる「トラバース」について学びました。さらに、より深く「トラバース」の活用方法について調べてみたい方は、jQuery公式サイトのドキュメントを参照してみてください。