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