jQuery API の index( element ) は、マッチしたDOM要素から、elementに指定した要素を検索し、「0」から始まるインデックス番号を返すメソッド。指定した要素が見つからなかった場合は、「-1」を返す。
引数
- element
DOM要素。
戻り値
「0」から始まるインデックス番号。指定した要素が見つからなかった場合は、「-1」を返す。
記述方法
jQuery( セレクター ) . index( DOM要素 )
「セレクター」にマッチしたDOM要素から、「DOM要素」に指定した要素を検索し、インデックス番号を返す。
記述例
jQuery( 'h3' ).click( function () {
jQuery( 'h3' ) . index( this );
} );
jQuery( 'h3' ) . index( this );
} );
クリックした「h3」要素のインデックス番号を取得。
実装例（サンプル）
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
実装例（サンプル）の動作について
「項目１～５」をクリックすると、クリックした項目のインデック番号を、右側に表示する。再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample li' ) . toggle(
function() {
jQuery( 'span', this ) . text( '（インデックス番号：' + jQuery( '#jquery-sample li' ) . index( this ) + '）' );
},
function() {
jQuery( 'span', this ) . text( '' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample li' ) . toggle(
function() {
jQuery( 'span', this ) . text( '（インデックス番号：' + jQuery( '#jquery-sample li' ) . index( this ) + '）' );
},
function() {
jQuery( 'span', this ) . text( '' );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample li {
color: #333333;
list-style-type: square;
cursor: pointer;
}
#jquery-sample li span {
color: red;
margin-left: 1em;
}
-->
</style>
<!--
#jquery-sample li {
color: #333333;
list-style-type: square;
cursor: pointer;
}
#jquery-sample li span {
color: red;
margin-left: 1em;
}
-->
</style>
HTML
<ul id="jquery-sample">
<li>項目１<span></span></li>
<li>項目２<span></span></li>
<li>項目３<span></span></li>
<li>項目４<span></span></li>
<li>項目５<span></span></li>
</ul>
<li>項目１<span></span></li>
<li>項目２<span></span></li>
<li>項目３<span></span></li>
<li>項目４<span></span></li>
<li>項目５<span></span></li>
</ul>