HTMLのリスト（ul,li）でクリックされたリストの番号やテキストを取得する方法です。リストをクリックした時にその値をテキストフィールドに反映させたりするときに多用します。プログラムは数行で書けるのでとても簡単です。

クリックされたリストの番号を取得

HTML

<ul id="Sample">
 <li>りんご</li>
 <li>みかん</li>
 <li>バナナ</li>
 <li>パイナップル</li>
 <li>オレンジ</li>
</ul>

jQuery

<script type="text/javascript">
$(function(){
    $('#Sample li').click(function(){
        var index = $(this).index() + 1;
        alert('要素:' + index + '番目');
    });
});
</script>

リストをクリックするとアラートに 「要素:3番目」というように、クリックしたリストの番号が表示されます。$(this).index は0番から始まるので +1 を加えています。

クリックされたリストのテキストを取得

HTML

<ul id="Sample2">
 <li>りんご</li>
 <li>みかん</li>
 <li>バナナ</li>
 <li>パイナップル</li>
 <li>オレンジ</li>
</ul>

jQuery

<script type="text/javascript">
$(function(){
    $('#Sample2 li').click(function(){
        var text = $(this).text();
        alert('テキスト:' + text);
    });
});
</script>

リストをクリックするとアラートに 「テキスト:バナナ」というように、クリックされたリストのテキストが表示されます。