【jQuery】thisの構文

もくじ

thisの構文

$(this)はイベントの中で、そのイベントが起こった要素を取得することができます。$()の中でthisをクォーテーション（"や'）で囲まないことに注意してください。

HTML

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

jQuery

$(this)を使う

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

$('li').click(function(){
  $(this).css('color', 'red');
});

今回はクリックした時文字色を赤色にする処理を記述しています。

$(this)にすることで$('li')のうちのクリックした要素に対して処理が実行されます。

$(this)を使わないと

$('li').click(function(){
  $('li').css('color', 'red');
});

クリックしたとき、$('li')要素すべてに処理が実行されてしまします。

パフォーマンス向上

thisを指定していると処理を加える要素がthisに代入される事になりますので 要素を探し出すという行為を減らせます。そのため処理性能をあげれるということになります。

結果的に、処理のパフォーマンスが向上します。

コードが少ないとあまり体感はできないかもしれませんが、是非頭の片隅に置いておきましょう。