何番目の要素か確認する方法
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 =
関連記事
- 集合を配列に変換する方法
- NodeListやHTMLCollectionなど、配列のメソッドを使えない集合系のオブジェクトを配列に変換するにはArray.from()や[].slice.call()を利用します。
- 選択フォームの値を取得する方法
- 選択フォームのどの項目が選択状態かを取得するには、要素のselectedプロパティを確認します。
- スクロールをする方法
- 絶対的、相対的に位置を指定して、スクロールします。
- 配列の重複する要素を削除する方法
- PHPのarray_unique()のように配列の重複した要素を削除します。
- ページを離れる時に警告する方法
- ページを離れる時に警告を表示するには、{{beforeunloadイベント}}を設定します。