ページ全体で何番目の要素かを調べる

指定した要素が親要素から見て何番目の要素かというのはよく使うのですが、ページ全体で何番目かというのはあまり使ったことがなかったので試してみました。

サンプルコード

HTML

<dl>
	<dt>お名前:</dt>
	<dd>
		<input type="text" size="10" />
		<input type="text" size="10" />
	</dd>
</dl>
<dl>
	<dt>メールアドレス:</dt>
	<dd>
		<input type="text" size="20" /> @
		<input type="text" size="20" />
	</dd>
</dl>
<dl>
	<dt>電話番号:</dt>
	<dd>
		<input type="text" size="5" /> -
		<input type="text" size="5" /> -
		<input type="text" size="5" />
	</dd>
</dl>

JavaScript

$(function() {
	$(':text').on('blur', function() {
		// 親要素からのindex番号
		var parentIndex = $(this).index();
		// HTML全体でのindex番号
		var htmlIndex = $(':text').index(this);

		console.log('親要素から:' + parentIndex + '番目');
		console.log('HTML全体で:' + htmlIndex + '番目');
	});
});

inputからフォーカスを外すと、そのinputが何番目かをconsole.logで表示します。
親要素、HTMl全体から見て何番目かのデモページ
　

【参考サイト】

• [jQuery] index()でクリックされたhtml要素が何番目の要素かを知る | きほんのき