ITコラム

jquery this

jQuery

2018.11.02

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

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

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

目次

1.$(this) で要素を取得
2.$(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) を使用して、クリックした要素の親要素の背景色を変更します。
各テキストをクリックしてみて下さい。

背景色#606のテキスト1
背景色#606のテキスト2
背景色#606のテキスト3

背景色#903のテキスト1
背景色#903のテキスト2
背景色#903のテキスト3

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

<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のテキスト1</span>
    <span>背景色#606のテキスト2</span>
    <span>背景色#606のテキスト3</span>
  </div>

  <div style="background-color:#903;">
    <span>背景色#903のテキスト1</span>
    <span>背景色#903のテキスト2</span>
    <span>背景色#903のテキスト3</span>
  </div>
</div>

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

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

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.