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

colmun_main12369

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をご参照下さい。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です