jQueryでthisを使ってタグ要素の番号（index）と値を取得

thisを使ってliタグのクリックした要素番号と値を取得し表示させてみます。

1．CSSの記述例

以下は任意です。
<style>
.clWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}
#txtoutput{
	width:600px;
	margin:0 auto;
	color:#F00;
	text-align:center;
	font-size:20px;
}
li{
	padding:3px 0;
	cursor:pointer;
	font-size:20px;
}
li:hover{
	color:#999;
}
</style>

2．読込むJsファイルとJavaScriptの記述例

id=txtoutputのタグに出力させます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("li").click(function () {
		$("#txtoutput").text(($("li").index(this)+1)+"番目のliタグ要素「"+$(this).text()+"」を取得しました。")
	});
});
</script>



3．HTMLの記述例

<div id="txtoutput">下のリストからクリックした要素がココに表示されます。</div>



<ul>

 	<li>CSS</li>


 	<li>Facebook</li>


 	<li>HTML5</li>


 	<li>JavaScript</li>


 	<li>PHP</li>


 	<li>SEO</li>


 	<li>WordPress</li>


 	<li>その他</li>


 	<li>スマートフォン</li>

</ul>

jQueryでthisを使ってliタグのクリック要素番号と値を取得・表示するデモ

thisの扱いって普段知ってるつもりでいましたが、いざ使おうとする普段曖昧にしか覚えてなかったことに気づきました。