何番目の要素か確認する方法

2017/08/09

JavaScriptでその要素が、ある集合の中で何番目にあるかを知りたい場合は、配列メソッドのindexOf()を利用するのがお手軽です。HTMLCollectionから配列を作成してやる必要があります。

サンプルコード

#targetのli要素が、何番目に配置されているかを取得する例です。番号は0から数えます。

<ul>
	<li>あ</li>
	<li>い</li>
	<li id="target">う</li>
	<li>え</li>
	<li>お</li>
</ul>

// 要素が含まれる集合オブジェクト (HTMLCollectionなど)
var elements = document.getElementsByTagName( "li" ) ;

// 番号を知りたい要素
var element = document.getElementById( "target" ) ;

// HTMLCollectionから配列を作成
elements = [].slice.call( elements ) ;

// 要素の順番を取得
var index = elements.indexOf( element ) ;	// 2

デモ

「え」のli要素が、何番目にあるかを確認する例です。

// <li>あ</li><li>い</li><li>う</li><li id="target">え</li><li>お</li>
var elements = document.getElementsByTagName( "li" ) ;

// <li id="target">え</li>
var element = document.getElementById( "target" ) ;

var index = [].slice.call( elements ).indexOf( element ) ;

index =

サンプルコード

デモ

関連記事