指定した要素の次以降にある兄弟要素を全て取得するには、.nextAll()を使用します。
サンプルソース
例)ボタンを押すと、id="a3"の次以降兄弟要素の文字を青色にする
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>nextAllサンプル</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function(){ $('#btn1').click(function(){ //id="a3"の次以降の兄弟要素の文字色を青にする $("#a3").nextAll().css("color", "blue"); }); }); </script> </head> <body> <input type="button" id="btn1" value="ボタン"> <ul> <li id="a1">AAA</li> <li id="a2">BBB</li> <li id="a3">CCC</li> <li id="a4">DDD</li> <li id="a5">EEE</li> </ul> </body> </html> |
ボタンを押すと、DDD、EEE が青文字になります。
解説
- nextAllの引数に、さらに絞り込むセレクタを指定できます。
- 指定した要素も取得対象としたい場合は、.addBack() を併用してください。
⇒ [jQuery] マッチした要素に加えて、1つ前にマッチした要素を加える