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

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

Contents

1 クリックされたリストの番号を取得
- 1.1 HTML
- 1.2 jQuery
2 クリックされたリストのテキストを取得
- 2.1 HTML
- 2.2 jQuery

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

HTML

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

<li>パイナップル</li>

</ul>

jQuery

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

$(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>

<li>パイナップル</li>

</ul>

jQuery

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