HTMLのリスト（ul,li）でクリックされたリストの番号やテキストを取得する方法です。リストをクリックした時にその値をテキストフィールドに反映させたりするときに多用します。プログラムは数行で書けるのでとても簡単です。
クリックされたリストの番号を取得
HTML
|
0 1 2 3 4 5 6 7 8 |
<ul id="Sample"> <li>りんご</li> <li>みかん</li> <li>バナナ</li> <li>パイナップル</li> <li>オレンジ</li> </ul> |
jQuery
|
0 1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(function(){ $('#Sample li').click(function(){ var index = $(this).index() + 1; alert('要素:' + index + '番目'); }); }); </script> |
リストをクリックするとアラートに 「要素:3番目」というように、クリックしたリストの番号が表示されます。$(this).index は0番から始まるので +1 を加えています。
クリックされたリストのテキストを取得
HTML
|
0 1 2 3 4 5 6 7 8 |
<ul id="Sample2"> <li>りんご</li> <li>みかん</li> <li>バナナ</li> <li>パイナップル</li> <li>オレンジ</li> </ul> |
jQuery
|
0 1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(function(){ $('#Sample2 li').click(function(){ var text = $(this).text(); alert('テキスト:' + text); }); }); </script> |
リストをクリックするとアラートに 「テキスト:バナナ」というように、クリックされたリストのテキストが表示されます。
