- jQuery
jQuery｢.next() / .nextAll()｣の使い方
1-1 .next()の機能とは？
.next()メソッドは、「指定した要素の直後にある兄弟要素を取得する」ことができます。
「直後の兄弟要素」とは、指定した要素の直後にある要素であり、単一の要素を取得する場合には、この.next()メソッドを使用します。
指定した要素より後ろにあるすべての要素を取得したい場合は、.nextAll()メソッドを使用します。
.next()の構文
.next()の構文は次のような記述となる
$(“セレクタ”).next(“取得要素の条件”);
「引数の取得要素の条件」は、指定する要素にマッチすれば取得し、マッチしなければ取得しない。
引数を「空欄」にすれば、直後の兄弟要素さえ存在すれば必ず取得する事になる（直後に兄弟要素がなければ取得できない）。
1-2 .next()の使用例
下記、HTMLとjQuery(JavaScript)です。
- とよた
- まつだ
- すばる
- ほんだ
$(function(){
$(“.next”).next().css(“color”,”red”)
});
この例ではclass=”next”の直後の兄弟要素を取得して.css(“color”,”red”)で取得した要素の色を赤に変更する事ができ、この場合「すばる」の文字が赤色に変わる。
実際の動きをcodePenで見ます。
2-1 .nextAll()の機能とは？
.nextAll()は、「指定要素の後の兄弟要をすべて取得する」事ができる。
また、引数に取得する要素の条件を指定する事で、絞り込む事も可能であり、条件に合わない場合は取得しない。
.next()と違い.nextAll()は「後の兄弟要素すべて」取得する事ができ、引数に取得要素を指定する事でより広範囲にて要素を拾う事ができる。
.nextAll()の構文
.nextAll()の構文は次のような記述となる
$(“セレクタ”).nextAll(“取得要素の条件”);
「引数の取得要素の条件」は、指定する要素にマッチすれば取得し、マッチしなければ取得しない。
引数を「空欄」にすれば、後の兄弟要素さえ存在すれば、後の兄弟要素をすべて取得する事ができる。
2-2 .nextAll()の使用例
下記、HTMLとjQuery(JavaScript)です。
- とよた
- まつだ
- すばる
- ほんだ
$(function(){
$(“.nextAll”).nextAll().css(“color”,”red”)
});
この例ではclass=”nextAll”より後の兄弟要素を取得して.css(“color”,”red”)で取得した要素の色を赤に変更する事ができ、この場合指定要素より後に存在する兄弟要素である、「スバル」「ホンダ」の文字が赤色に変わる。
実際の動きをcodePenで見ます。
jQuery｢.next() / .nextAll()｣についてのまとめ
以上が、jQueryで｢.next() / .nextAll｣で直後の兄弟要素を取得する方法でした。