jQuery【 this 】便利な $(this) の使い方

JavaScript でも キーワード「 this 」を使用しますが、jQuery では 「 $(this) 」をオブジェクトとして使用します。
今回は、jQuery の $(this) の使用方法について解説いたします。

なお、JavaScript の this の使用方法についてはJavaScript【 this 】 ～ 独特なキーワードをご参照下さい。

1. $(this) で要素を取得

　
$(this) を使用して、クリックした要素のテキストを取得します。
各テキストをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("span").on("click", function() {
    $("#p1").html($(this).text());
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px 20px 5px;">
  <span style="color:blue;">青テキスト</span>
  <span style="color:green;">緑テキスト</span>
  <span style="color:purple;">紫テキスト</span>
  <span style="color:red;">赤テキスト</span>
  <p id="p1">　</p>
</div>

上のサンプルでは「 $(this) 」でクリックした span 要素を取得するため、「 $(this).text() 」という記述で クリックした span 要素内のテキストを取得します。

　
同様に「 $(this) 」を使用して 次のように記述すると、クリックしたテキストの色が黒に変わります。

<script type="text/javascript">
<!--
$(function() {
  $("span").on("click", function() {
    $(this).css("color", "black");
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px 20px 5px;">
  <span style="color:blue;">青テキスト</span>
  <span style="color:green;">緑テキスト</span>
  <span style="color:purple;">紫テキスト</span>
  <span style="color:red;">赤テキスト</span>
</div>

「 $(this).css(“color”, “black”); 」という記述で、クリックした span 要素のテキストの色を黒に変更しています。

▲目次へ戻る

2. $(this) で親要素を取得

　
$(this) を使用して、クリックした要素の親要素の背景色を変更します。
各テキストをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("span").on("click", function() {
    $(this).parent().css("background-color", "#CCC");
  });
});
//-->
</script>

<div style="background-color:#FFC0CB; padding:20px;">
  <div style="background-color:#606;">
    <span>背景色#606のテキスト１</span>
    <span>背景色#606のテキスト２</span>
    <span>背景色#606のテキスト３</span>
  </div>

  <div style="background-color:#903;">
    <span>背景色#903のテキスト１</span>
    <span>背景色#903のテキスト２</span>
    <span>背景色#903のテキスト３</span>
  </div>
</div>

「 $(this).parent().css(“background-color”, “#CCC”); 」という記述で、クリックした span 要素の親要素である div 要素の背景色を カラーコード #CCC に変更しています。

parent メソッドの使用方法についてはjQuery【 parent 】親要素を取得する parent と parentsをご参照下さい。

▲目次へ戻る

3. まとめ

jQueryの $(this) について、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る