こんにちは、ライターのマサトです！
今回は、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">項目１</li>
<li class="two">項目２</li>
<li class="three">項目３</li>
<li class="four">項目４</li>
<li class="five">項目５</li>
<li class="six">項目６</li>
</ul>
リスト要素が配置されており、それぞれ順番にclass属性値が「one」〜「six」まで付与されています。
この時に、class属性値が「two」から「five」までの範囲を指定したい場合は次のように記述します！
const result = $('.two').nextUntil('.five');
console.log( result.text() );
実行結果
項目３項目４
まず対象となる要素「$(‘.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()」は対象要素の同階層にあるすべての要素を取得できる
上記内容を踏まえて、ぜひ自分のプログラムにも積極的に活用してプログラミング出来るように頑張りましょう！
