jQuery API の get( index ) は、マッチしたDOM要素のうち、インデックス番号が「index」である要素を取得し、DOM要素を返すメソッド。
引数
- index
「0」から始まるインデックス番号。
戻り値
DOM要素。
記述方法
jQuery( セレクター ) . get( インデックス番号 )
「セレクター」にマッチしたDOM要素のうち、インデックス番号が「インデックス番号」であるDOM要素を取得する。
記述例
jQuery( '.sample' ) . get( 2 )
クラス名が「sample」であるDOM要素のうち、インデックス番号が「2」であるDOM要素を取得する。
実装例（サンプル）
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
実装例（サンプル）の動作について
「toggle」ボタンをクリックすると、「項目１」のテキストカラーを赤色に、「項目３」のテキストカラーを青色に、「項目５」のテキストカラーを緑色に、変更する。
「toggle」ボタンを再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( jQuery( '#jquery-sample li' ) . get( 0 ) ) . css( 'color', 'red' );
jQuery( jQuery( '#jquery-sample li' ) . get( 2 ) ) . css( 'color', 'blue' );
jQuery( jQuery( '#jquery-sample li' ) . get( 4 ) ) . css( 'color', 'green' );
},
function() {
jQuery( '#jquery-sample li' ) . css( {
'color': '#333333',
'listStyleType': 'square',
} );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( jQuery( '#jquery-sample li' ) . get( 0 ) ) . css( 'color', 'red' );
jQuery( jQuery( '#jquery-sample li' ) . get( 2 ) ) . css( 'color', 'blue' );
jQuery( jQuery( '#jquery-sample li' ) . get( 4 ) ) . css( 'color', 'green' );
},
function() {
jQuery( '#jquery-sample li' ) . css( {
'color': '#333333',
'listStyleType': 'square',
} );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample li {
color: #333333;
list-style-type: square;
}
-->
</style>
<!--
#jquery-sample li {
color: #333333;
list-style-type: square;
}
-->
</style>
HTML
<p>
<button id="jquery-sample-button">toggle</button>
</p>
<ul id="jquery-sample">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>
<button id="jquery-sample-button">toggle</button>
</p>
<ul id="jquery-sample">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>