JavaScript

jQueryでthisを使ってliタグ要素の番号(index)と値(text)を取得

jQueryでthisを使ってクリックしたliタグ要素の番号(index)と値(text)を取得し表示する方法をご紹介します。

クリックしたliタグ要素の番号と値を取得し表示するCSSの記述

※必要に応じて変更して下さい。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
.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>

jQueryでthisを使ってクリックしたliタグ要素の番号と値を取得し表示するJavaScriptの記述

※jquery.min.jsファイルを読み込みます。liタグをクリックすると要素の番号と値を取得し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>

クリックしたliタグ要素の番号と値を取得し表示するHTMLの記述

※liタグを用意しliタグをクリックすると要素の番号と値を取得しid=”txtoutput”タグに取得した情報を出力します。必要に応じて変更して下さい。

<div class="clWrap">
    <h1>liタグをクリック要素の番号と値を取得・表示します。</h1>

	<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>

</div><!--/clWrap-->

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

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

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

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。