特定の要素の順番の取得方法

特定の要素の順番を取得して処理を行う機会はよくあるのではないでしょうか。
今回はjQueryで特定の要素の順番を取得する方法をご紹介します。

jQueryの「index()」

jQueryで特定の要素の順番を取得するには、以下の記述を行います。

var num = $('要素のセレクタ').index();

実際の「index()」の使用例

実際の「index()」の使用例です。
リストのなかで、クラス「target」を持つliタグが何番目にいるかを取得し、下に出力させます。

<ul class="jqindex-list">
	<li>リスト</li>
	<li>リスト</li>
	<li class="target">リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>
<p class="jqindex-num">ターゲットは <span class="nums"></span> 番目です。</p>

.jqindex-list > li{
	margin-left: 20px;
	list-style: disc;
}
.jqindex-list > li.target{
	font-weight: bold;
}
.jqindex-num > .nums{
	font-size: 110%;
	font-weight: bold;
}

if($(".jqindex-list").length){
    var num = $(".jqindex-list > li.target").index() + 1;
		$('.jqindex-num > .nums').html(num);
}

DEMOはこちら

参考ページ