[jQuery] クリックされたリストの番号やテキストを取得する方法

HTMLのリスト(ul,li)でクリックされたリストの番号やテキストを取得する方法です。リストをクリックした時にその値をテキストフィールドに反映させたりするときに多用します。プログラムは数行で書けるのでとても簡単です。
クリックされたリストの番号を取得
HTML
1 2 3 4 5 6 7 |
<ul id="Sample"> <li>りんご</li> <li>みかん</li> <li>バナナ</li> <li>パイナップル</li> <li>オレンジ</li> </ul> |
jQuery
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(function(){ $('#Sample li').click(function(){ var index = $(this).index() + 1; alert('要素:' + index + '番目'); }); }); </script> |
リストをクリックするとアラートに 「要素:3番目」というように、クリックしたリストの番号が表示されます。$(this).index は0番から始まるので +1 を加えています。
クリックされたリストのテキストを取得
HTML
1 2 3 4 5 6 7 |
<ul id="Sample2"> <li>りんご</li> <li>みかん</li> <li>バナナ</li> <li>パイナップル</li> <li>オレンジ</li> </ul> |
jQuery
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(function(){ $('#Sample2 li').click(function(){ var text = $(this).text(); alert('テキスト:' + text); }); }); </script> |
リストをクリックするとアラートに 「テキスト:バナナ」というように、クリックされたリストのテキストが表示されます。関連記事
- [JQuery] Ajaxが使える状態かどうかチェックする方法
- [jQuery] eachでリストの要素数を数える
- [Ajax] jQueryとPHPでWebページの一部分を更新する方法
- [jQuery] 配列を取り出して任意の形で表示する each() append()
- [jQuery] クリックしたリンクURLを取得する方法