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

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

サンプルコード

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全体から見て何番目かのデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31