【jQuery】何番目(n番目)の要素かを取得する

今回は、何番目(n番目)の要素がクリックされたかを取得します。

$(セレクタ).index(this);

index()関数で取得する値(リストの中のクリックした要素の番数)を変数に入れてアラートで表示します。

<script>
$(function(){
	// 要素を指定
	var sel = "ul#navi li";

	// 関数実行
	putNumber(sel);

	function putNumber(sel){
		$(sel).click(function(){
		  var index = $(sel).index(this);
			alert((index+1)+"番目");
		})	
	}
});
</script>
<ul id="navi">
	<li>block01</li>
	<li>block02</li>
	<li>block03</li>
	<li>block04</li>
	<li>block05</li>
	<li>block06</li>
	<li>block07</li>
	<li>block08</li>
	<li>block09</li>
	<li>block10</li>
</ul>

js_n_number

(index+1)としているのは、要素の開始が0番目からなので、わかりやすいように”+1″しています。

こっちの方が使いまわせるかも…(結果は同じです)

<script>
$(function(){
	var sel = "ul#navi li";
	
	$(sel).click(function(){
		// 関数実行
		var n_number = getNumber(sel, this);
		alert((n_number+1)+"番目");
	})	
	
	function getNumber(sel, target){
		var index = $(sel).index(target);
		return index;
	}
});
</script>

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>