jQueryでthisを使ってliタグ要素の番号（index）と値（text）を取得する方法｜DAD UNION

今回は、jQueryを使ってクリックしたliタグ要素の番号（index）と値（text）を取得し表示する方法をご紹介します。
初心者でも分かりやすく、ステップバイステップで解説しますので、ぜひ参考にしてみてください。

Contents

クリックしたliタグ要素の番号と値を取得し表示するCSSの記述
jQueryでthisを使ってクリックしたliタグ要素の番号と値を取得し表示するJavaScriptの記述
クリックしたliタグ要素の番号と値を取得し表示するHTMLの記述
jQueryでthisを使ってliタグのクリック要素番号と値を取得・表示するデモページ
まとめ

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

まずは、必要なCSSの設定です。ここでは、簡単なスタイルを設定していますが、必要に応じて変更してください。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",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を使ったJavaScriptの記述です。ここでは、jquery.min.js（v1.7.1）ファイルを読み込み、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の記述

続いて、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-->