jQueryでthisを使ってクリックしたliタグ要素の番号(index)と値(text)を取得し表示する方法をご紹介します。
Contents
ディスプレイ広告
クリックした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(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の記述
※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アナリティクスタグは流用しないで下さい。