問題 × 解決策

jQueryの「index()」で特定の要素の順番を取得する

問題

jQueryで特定の要素の順番を取得するには?

解決策

jQueryの「index()」を使用する。

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

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

jQueryの「index()」

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

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

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

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

HTML

<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>

CSS

.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;
}

javascript

if($(".jqindex-list").length){
    var num = $(".jqindex-list > li.target").index() + 1;
		$('.jqindex-num > .nums').html(num);
}
  • 取得したindex値に+1します。

DEMOはこちら

  • リスト
  • リスト
  • リスト
  • リスト
  • リスト

ターゲットは 番目です。

ここに注意!

「index()」は、「0、1、2…」という形式で0からカウントしていきます。
なので1番目が0となるので、注意が必要です。

参考ページ

【jQuery リファレンス:index】
http://www.jquerystudy.info/reference/miscellaneous/index2.html

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

four + six =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧