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

クリックされた要素が何番目のものかを知りたいときがあります。例えば並んでいるボタンのうち、何番目のものが押されたかを知りたい時などです。

　
• ボタン1
　
• ボタン2
　
• ボタン3

クリックすると何番目のボタンが押されたかを表示します。

こういう場合はjQueryのindex()を使います。

index()は引数で指定された要素のインデックス番号を返す関数です。上の場合だと、$("button").index(this)と書くと、クリックされたボタンが、ドキュメント上の何番目にあるボタンかを返してくれます。

上のケースでは以下ようなコードになっています。

<ul>
　<li><button>ボタン1</button></li>
　<li><button>ボタン2</button></li>
　<li><button>ボタン3</button></li>
</ul>
<script>
jQuery(function($){
	$("ul>li>button").click(function(){
		var index = $("ul>li>button").index(this);
		index += 1;
		alert( "ボタン"+index+"がクリックされました。" );
	});
});
</script>

$("button").index(this)だと、ページ上のすべてのボタン要素の中で何番目かを算出するので、$("ul>li>button").index(this)と書くことで、リストの中にあるボタンに限定しています。

インデックス番号は0から始まりますので、1番目のボタンの場合、インデックス番号は0になります。なので、上のコードではインデックス番号に+1しています。