【jQuery入門】next(),nextAll(),siblings()で兄弟要素を取得する!

こんにちは、ライターのマサトです!

今回は、jQueryで兄弟要素(同階層)を取得するための「next()」メソッドについて学習をしていきましょう!

この記事では、

・「next()」とは?
・next()の使い方
・next()の注意点

という基本的な内容から、

・「nextAll()」とは?
・「prev()」とは?
・「siblings()」とは?

などの応用的な使い方に関しても解説していきます。

この記事で、jQueryのnext()メソッドをしっかり学習して自分のスキルアップを目指しましょう!

「next()」とは?

それでは、まず最初に「next()」メソッドの基本的な知識から勉強を進めていきましょう!

「next()」は、同じ階層にある要素を取得できるのですが、対象要素の次に配置されている要素だけを取得するのが特徴です。

例えば、次のようなHTMLをイメージしてください。

<div>
    <p>おはよう</p>
    <p>こんちには</p>
    <p>こんばんは</p>
</div>

「おはよう」と書かれたp要素の次に配置されている要素は何でしょうか?

答えは簡単ですね。「こんにちは」と書かれたp要素が該当します!

このように対象となる要素の次に配置されている要素を取得できるわけです。

面白いのは、何の要素が次に配置されているか分からなくても取得できるのがポイントです。

本記事では、このnext()メソッドについてさまざまな活用事例を学習できるようにしますので、ぜひ参考にしてみてください!

next()の使い方

next()で次の要素を取得する方法

ここからは、実際に「next()」メソッドを使ってプログラミングをしてみましょう!

記述方法としては、【要素.next( セレクタ )】のように対象要素に続けてnext()を記述するのが基本です。

また、引数のセレクタは省略することができます。

次のサンプル例を見てください!

<body>
<div>
    <p class="text">おはよう</p>
    <p>こんちには</p>
    <p>こんばんは</p>
</div>

<script>
    const result = $('.text').next();

    console.log( result.text() );
</script>
</body>

実行結果

こんにちは

この例では、先ほどのHTMLを使って3つのp要素を配置しています。

そこで、class属性値「text」が付与されたp要素に対してnext()メソッドを実行しています。

「$('.text').next()」と記述することで、「おはよう」のp要素の次に配置されている要素を取得できます。

取得した要素に対して「text()」を実行することで、結果的に「こんにちは」という文字列を取得できていますよね。

セレクタを指定して条件検索する方法

今度は、next()メソッドの引数に任意のセレクタを指定してみましょう!

タグや属性などを指定することで特定の要素に合致した場合のみ取得できるようになるのです。

例えば、次のようなHTMLがあるとします!

<div>
    <h1>タイトル</h1>
    <p class="sample">こんにちは</p>
</div>

まずは、p要素にclass属性が付与されている点に注目しておいてください。

この場合に、h1要素を対象にして今まで通り「next()」を使うと次のようになりますね。

$('h1').next();

これでp要素は取得できるわけですが、引数にセレクタ指定を行うと次のようになります。

$('h1').next('.test');

この場合は、引数に「.test」を指定しているのでh1要素の次の要素がclass属性値「test」を持っている必要があります。

しかし、今回の場合だとclass属性値は「sample」なので合致せずに何も取得されないということになります。

このように、引数を活用すると条件検索ができるようになるので覚えておきましょう!

next()の注意点

複数のnext()を使うケースについて

これまで「next()」メソッドを単発で使用してきましたが、実は複数繋げて利用することも可能です。

一般的な記述としては「next().next().next()・・・」のようになり、「次の次の次の・・・要素」というイメージですね。

例えば、次のようなHTMLがあるとします。

<div>
    <h1>タイトル</h1>
    <p>おはよう</p>
    <p>こんにちは</p>
    <p>こんばんは</p>
</div>

h1要素を対象にして、3つ目のp要素を取得するには次のように記述します。

$('h1').next().next().next();

このようにnext()を続けて複数記述することで、3つ目の「こんばんは」というp要素が取得できるわけす。

この記述方法は直感的で分かりやすく、簡単なのでついつい乱用してしまいがちです。

しかしながら、場合によっては上手く動作しないこともあるので次の章で詳しく見ていきましょう!

next()のアンチパターン

next()を複数記述する方法を学んだところで、初心者が間違いやすいパターンの例を学習しておきましょう。

次のHTML構造を見てください!

<div>
    <h1>タイトル</h1>
    <p>おはよう</p>
    <p>こんにちは</p>
    <p>こんばんは</p>
</div>

前章の例と同じく、1つの「h1要素」と3つの「p要素」が配置されています。

この時に、複数のnext()を使って2つ目・3つ目のp要素を取得するには次のように記述しますよね。

//2つ目のp要素を取得
$('h1').next().next();

//3つ目のp要素を取得
$('h1').next().next().next();

この例では、next()をそのまま複数繋げて記述しています。

ところが、HTMLの構造がリニューアルなどで変化した場合はどうでしょうか?

<div>
    <h1>タイトル</h1>
    <p>おはよう</p>
    <div>
        <p>こんにちは</p>
        <p>こんばんは</p>
    </div>
</div>

この例では、先ほどのHTMLで2つ目・3つ目のp要素がdivの階層下に移動しました。

そして同じようにnext()を複数繋げてみます。

$('h1').next().next().next();

すると、今度は何も取得できません!

理由は簡単で、h1要素から数えて3つ目の要素が無くなってしまったからですね。

このようにHTMLの構造が変化するということは非常に多いですので、next()の複数連結には注意が必要なわけです。

そこで、1つの解決策としては次の章でご紹介する「nextAll()」メソッドを使うことになるでしょう!

「nextAll()」とは?

ここからは「nextAll()」メソッドについて基本的な学習をしていきましょう!

「nextAll()」は、同じ階層の対象要素以降にある要素をセレクタ指定で取得することができるメソッドです。

「next()」が次の要素だけしか取得できないのに対して、「nextAll()」は同階層の次以降の要素をすべてチェックできるわけです。

そのため、nextAll()メソッドを使えば効率の良いプログラムを書くことができます!

対象の要素以降をすべて取得する方法

それでは、実際に「nextAll()」メソッドを使ったプログラミングを行ってみましょう!

記述方法は【 要素.nextAll( セレクタ ) 】のように「next()」とほぼ同じ書き方ができるようになっています。

次のサンプル例を見てください!

<body>
<div>
    <h1>タイトル</h1>
    <p>おはよう</p>
    <p>こんにちは</p>
    <a href="#">リンクテキスト</a>
</div>

<script>
    const result = $('h1').nextAll('a');

    console.log( result.text() );
</script>
</body>

実行結果

リンクテキスト

この例では、「h1」「p」「a」要素がそれぞれ配置されています。

そこで「h1」を対象として「nextAll('a')」のように記述することで、同階層に存在する「a要素」を取得することができます。

実行結果には、「text()」メソッドを使ってa要素の文字列が出力できているのが分かりますね。

このように、対象とする要素の次以降にある同じ階層の要素であれば自由に取得することができるので便利です!

next()とnextAllの違い

さて、ここでもう一度「next()」「nextAll()」の違いについて振り返ってみましょう!

最も重要なポイントは以下のとおりです。

・「next()」は、対象要素の次(直後)の要素だけ取得できる
・「nextAll()」は、対象要素の次以降にある同じ階層の要素を取得できる

上記ポイントを踏まえたうえで、実際に次のサンプル例で詳しく見てみましょう。

<body>
<div>
    <h1>タイトル</h1>
    <p>おはよう</p>
    <p>こんにちは</p>
    <p class="text">こんばんは</p>
</div>

<script>
    const result1 = $('h1').next().next().next('.text');
    const result2 = $('h1').nextAll('.text');

    console.log(result1.text());
    console.log(result2.text());
</script>
</body>

実行結果

こんばんは

こんばんは

この例では、「h1タグ」と3つの「pタグ」が配置されています。

そして、class属性値「text」が付与されたp要素を取得するために、「next()」「nextAll()」それぞれの方法で取得しているのが分かりますね。

「h1」を対象にして、「nextAll('.text')」と記述することで簡単に目的のp要素が取得できます。

これに対して、「next()」を使う場合には「next().next().next('.text')」のように記述が複雑になってしまうのが特徴ですね。

さらに、「next()」の場合はHTMLの構造変化に対応するのが難しいですが、「nextAll()」は目的の要素を抽出できるメリットがあるというわけです。

「nextUntil()」で階層を範囲指定する方法

次に、「nextUntil()」メソッドについても合わせて解説しておきます!

「nextAll()」とよく似ているのですが、「nextUntil()」は同階層にある要素の範囲を指定できるのが最大の特徴です。

例えば、次のようなHTML構造があるとします。

<ul>
    <li class="one">項目1</li>
    <li class="two">項目2</li>
    <li class="three">項目3</li>
    <li class="four">項目4</li>
    <li class="five">項目5</li>
    <li class="six">項目6</li>
</ul>

リスト要素が配置されており、それぞれ順番にclass属性値が「one」〜「six」まで付与されています。

この時に、class属性値が「two」から「five」までの範囲を指定したい場合は次のように記述します!

const result = $('.two').nextUntil('.five');

console.log( result.text() );

実行結果

項目3項目4

まず対象となる要素「$('.two')」を指定し、範囲を決めるために「nextUntil('.five')」と記述します。

これでclass属性値「two」から「five」までの範囲を指定できます。

注意点として、実行結果からも分かるように範囲を指定した要素自体は含まれないという点を忘れないようにしましょう!
(今回の場合だとclass属性値「two」と「five」を持つ要素は含まれません)

「prev()」とは?

対象要素の直前の要素を取得する方法

「next()」と一緒によく使われる「prev()」メソッドについて見ていきましょう!

「next() / nextAll()」が直後かそれ以降の要素を取得するのに対して、「prev()」は直前の要素を取得するのに特化しているのが特徴です。

記述方法はnext()と同じで、【 要素.prev( セレクタ ) 】のように記述し引数のセレクタは省略可能です。

例えば、次のようなHTMLがあるとします!

<div>
    <p class="one">おはよう</p>
    <p class="two">こんにちは</p>
    <p class="three">こんばんは</p>
</div>

class属性値「two」を持つ要素を対象にして、prev()を実行すると次のようになります。

$('.two').prev();
 

prev()は直前の要素を取得するメソッドなので、結果的にはclass属性値「one」を持つ要素「おはよう」のp要素が取得できます。

また、「nextAll()」と同じように「prevAll()」メソッドもあります!

$('.three').prevAll();

対象要素を「$('.three')」と指定し「prevAll()」を実行すれば、それより以前の要素をすべて取得することができます。

この例だと、「おはよう」「こんにちは」というテキストを持つp要素が取得できるというわけです。

「siblings()」とは?

同じ階層の要素をすべて取得する方法

最後に、「siblings()」メソッドについて解説しておきます!

「siblings()」は、「next()」「prev()」を融合させたようなメソッドで、さらに同階層の要素をすべてチェックすることができます。

対象要素の「前・後」に関わらず、同階層であれば特定の要素を抽出できるので非常に重宝するメソッドになります。

次のサンプル例を見てください!

<body>
<div>
    <p class="one">おはよう</p>
    <p class="two">こんにちは</p>
    <p class="three">こんばんは</p>
    <p class="four">よろしく</p>
    <p class="five">がんばれ</p>
</div>

<script>
    const result1 = $('.three').siblings('.one');
    const result2 = $('.three').siblings('.five');

    console.log( result1.text() );
    console.log( result2.text() );
</script>
</body>

実行結果

おはよう
がんばれ

この例では、class属性値が付与された5つのp要素が配置されているのが分かりますね。

そして、class属性に「three」が付与されたp要素を対象にして「siblings()」を2回実行しています。

1回目は「siblings('.one')」と記述しており、対象のp要素よりも前に存在する要素を取得しています。

2回目は「siblings('.five')」と記述しており、対象のp要素よりも後に存在する要素を取得しています。

このように、対象要素の「直前・直後」だけでなく、同階層であればすべてチェック出来る優秀なメソッドというわけです。

「next()」と合わせてこちらも覚えておくようにしましょう!

まとめ

今回は、jQueryで兄弟要素(同階層)を取得するための「next()」メソッドについて学習をしました!

最後に、もう一度ポイントをおさらいしておきましょう!

・「next()」は対象要素の直後にある要素を取得できる
・「next()」を複数繋げて使うなら「nextAll()」を使おう
・「prev()」は対象要素の直前にある要素を取得できる
・「siblings()」は対象要素の同階層にあるすべての要素を取得できる

上記内容を踏まえて、ぜひ自分のプログラムにも積極的に活用してプログラミング出来るように頑張りましょう!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー