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

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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プログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

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

▲目次へ戻る