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の記述例

divタグ(id=txtoutput)に出力させます。

<script type="text/javascript" src="http://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の扱いって普段知ってるつもりでいましたが、
いざ使おうとする普段曖昧にしか覚えてなかったことに
気づかされます。