jQueryでのthisの使い方

thisとは

thisは、jQuery内で使われる特殊なキーワードで、イベントが起こった要素を取得することができます。記述する際は$(this)と書きクォーテーション("や')は必要ありません。

使い方

下記のように、複数のli要素にclickイベントは設定されていた場合、実際にクリックされたli要素にだけ処理を行いたい場合があります。このような場合にthisを用いて、実際にクリックした要素のみイベントを処理することができます。

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

//どのli要素をクリックしても、クリックイベントが発生
$('li').click(function() {

    //$(this)には実際にクリックされたli要素が入る
    $(this).css('color', 'red');
});

また、応用としてclickイベントの中で、クリックされた要素のインデックス番号を取得することができます。下記の$(this)にはクリックした要素が入ります。それをindexメソッドの引数に指定することで、クリックした要素のインデックス番号を取得することができます。

<ul>
    <li>インデックス0</li>
    <li>インデックス1</li>
    <li>インデックス2</li>
</ul>

$('li').click(function() {

    //クリックしたli要素のインデックス番号が変数indexに代入される
    var index = $('li').index($(this));
});