jQueryのthisとは?仕様と使い方【サンプルコード有】

jQuery

jQueryで扱うthisについてまとめました。

開発する上で重要なセレクタとなりますので、必ず理解した上で活用してみましょう!

jQueryの$(this)とは?イベントを引き起こしたjQueryオブジェクトを指します

「this」とは日本語で「これ」という意味です。

そして、「$()」はjQueryオブジェクトを指します。

2つを組み合わせると「$(this)」となるのですが、これは

「イベンドハンドラ内で使用できる、イベントを引き起こしたこの要素」

を指します。

上の例で言うと、イベンドハンドラ内で使う$(this)は、「クリックされた$('.hoge')要素」ということですね。

このサンプルコードは、クリックされた要素を$(this)で取得し、文字色を赤くするといった処理をしております。

サンプルコード
<p class="hoge">テキスト1</p>
<p class="hoge">テキスト2</p>
<p class="hoge">テキスト3</p>

<script>
$('.hoge').click(function(){
    $(this).css('color', 'red');
});
</script>

テキスト1

テキスト2

テキスト3

また、「イベンドハンドラ内で$('.hoge')で使用しても同じ意味?」と思われるかもしれませんが、これは違います。

サンプルコード
<p class="hoge">テキスト1</p>
<p class="hoge">テキスト2</p>
<p class="hoge">テキスト3</p>

<script>
$('.hoge').click(function(){
    $('.hoge').css('color', 'red');
});
</script>

テキスト1

テキスト2

テキスト3

こう書いてしまうとすべての「.hoge」要素の色が変わってしまうため、クリックした要素の色を変える、という処理が行うために$(this)が必要なのです。

「this」とだけ書いた場合の処理

「this」と「$(this)」は厳密には意味が違います。

$(this)と書くことでjQueryオブジェクトと扱うのですが、「this」とだけ書いた場合はただのDOMオブジェクトになるため、jQueryの$(this).css()などのメソッドを使用できず、JavaScriptのプロパティを使用することになります。

サンプルコード
<p>fuga</p>
<p>hoge</p>
<p>fugahoge</p>

<script>
$('p').click(function(){
    alert(this.innerHTML);
});
</script>

fuga

hoge

fugahoge

$(this)から子要素にアクセスする

$(this)から.find()や.children()を繋げて(メソッドチェーン)、子要素のセレクタへアクセスが出来ます。

サンプルコード
<ul>
    <li>リスト1-1</li>
    <li>リスト1-2</li>
    <li>リスト1-3</li>
</ul>
<ul>
    <li>リスト2-1</li>
    <li>リスト2-2</li>
    <li>リスト2-3</li>
</ul>
<ul>
    <li>リスト3-1</li>
    <li>リスト3-2</li>
    <li>リスト3-3</li>
</ul>

<script>
$(function(){
    $('ul').click(function(){
        $(this).find('li').css('color', 'red');
    });
});
</script>
  • リスト1-1
  • リスト1-2
  • リスト1-3
  • リスト2-1
  • リスト2-2
  • リスト2-3
  • リスト3-1
  • リスト3-2
  • リスト3-3

ulをクリックすることで、その子要素のliの文字色を変更できます。

jQueryで子要素を取得するfindとchildrenの使い方【サンプル有】
jQueryにて、子要素を操作するメソッドfind、childrenの仕様についてまとめました。子要素の存在の有無や、子要素の数の取得などについてもまとめています。

$(this)から親要素にアクセスする

子要素と同じように、$(this)から.parent()や.closest()を繋げて、親要素のセレクタへアクセスが出来ます。

先ほどの子要素のアクセスとは逆に、子要素のliから親要素のulへアクセスする例です。

サンプルコード
<ul>
    <li>リスト1-1</li>
    <li>リスト1-2</li>
    <li>リスト1-3</li>
</ul>
<ul>
    <li>リスト2-1</li>
    <li>リスト2-2</li>
    <li>リスト2-3</li>
</ul>
<ul>
    <li>リスト3-1</li>
    <li>リスト3-2</li>
    <li>リスト3-3</li>
</ul>

<script>
$(function(){
    $('li').click(function(){
        $(this).closest('ul').css('color', 'red');
    });
});
</script>
  • リスト1-1
  • リスト1-2
  • リスト1-3
  • リスト2-1
  • リスト2-2
  • リスト2-3
  • リスト3-1
  • リスト3-2
  • リスト3-3

liをクリックすることで、その親要素のulの文字色を変更できます。

jQueryで親要素を取得するparentとclosestの使い方【サンプル有】
jQueryにて、親要素を操作するメソッドparent、parents、closestの仕様についてまとめました。それぞれの関数を上手く使い分けると効率的な処理が出来ます。

thisはjQueryの開発で頻繁に使用する書き方です。

必ず仕様を抑えた上で、効率的に開発を目指していきましょう。

以上、jQueryのthisとは?仕様と使い方、でした。

コメント

タイトルとURLをコピーしました