jQuery API の nextAll( [selector] ) は、マッチした要素の全ての弟要素のうち、selectorにマッチする弟要素を選択するメソッド。
記述方法
jQuery( セレクター ) . nextAll();
「セレクター」にマッチする要素の全ての弟要素を選択。
jQuery( セレクター１ ) . nextAll( セレクター２ );
「セレクター１」にマッチする要素の全ての弟要素のうち、「セレクター２」にマッチする弟要素を選択。
記述例
jQuery( '#sample' ) . nextAll();
idが「sample」である要素の全ての弟要素を選択。
jQuery( '#sample' ) . nextAll( '.sample-nextAll' );
idが「sample」である要素の全ての弟要素のうち、クラス名が「sample-nextAll」である弟要素を選択。
実装例（サンプル）
実装例（サンプル）の動作について
クリックしたボックス要素の全ての弟要素の背景色をピンク色にする。
クリックしたボックス要素の全ての弟要素のうち、クラス名が「jquery-sample-border」である弟要素の枠線の色を赤色にする。
「clear」ボタンをクリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample > div' ) . click( function() {
jQuery( this ) . nextAll() . css( 'backgroundColor', 'pink' );
jQuery( this ) . nextAll( '.jquery-sample-border' ) . css( 'border', '1px solid red' );
} );
jQuery( '#jquery-sample-button' ) . click( function() {
jQuery( '#jquery-sample > div' ) . css( { 'backgroundColor': 'yellow', 'border': '1px solid gray' } );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample > div' ) . click( function() {
jQuery( this ) . nextAll() . css( 'backgroundColor', 'pink' );
jQuery( this ) . nextAll( '.jquery-sample-border' ) . css( 'border', '1px solid red' );
} );
jQuery( '#jquery-sample-button' ) . click( function() {
jQuery( '#jquery-sample > div' ) . css( { 'backgroundColor': 'yellow', 'border': '1px solid gray' } );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample div {
float: left;
margin: 10px;
width: 50px;
height: 50px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
-->
</style>
<!--
#jquery-sample div {
float: left;
margin: 10px;
width: 50px;
height: 50px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
-->
</style>
HTML
<p><button id="jquery-sample-button">clear</button></p>
<div id="jquery-sample">
<div></div>
<div class="jquery-sample-border"></div>
<div></div>
<div class="jquery-sample-border"></div>
<div></div>
</div>
<div style="clear: left;"></div>
<div id="jquery-sample">
<div></div>
<div class="jquery-sample-border"></div>
<div></div>
<div class="jquery-sample-border"></div>
<div></div>
</div>
<div style="clear: left;"></div>