jQueryで$(this)の使い方【サンプルコード有】

2019年8月3日2020年2月25日

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>

また、「イベンドハンドラ内で$('.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>

こう書いてしまうとすべての「.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>

$(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>

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

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>

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

jQueryで親要素を取得するclosest,parent,parentsの使い方【サンプル有】

$(this)からidなどの属性を取得する

$(this)は、クリックした要素のidを取得する、などイベント対象のデータを取得したい場合にも重宝します。

属性の取得はattr()で行います。

参考 jQueryで属性を設定するattrとpropの使い方【サンプルコード有】

<p id="test1">サンプルテキスト1</p>
<p id="test2">サンプルテキスト2</p>
<p id="test3">サンプルテキスト3</p>

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

$(this)からdata属性を取得する

jQueryでデータの取得が容易なdata属性も、イベントを引き起こした要素から取得したい、といったケースが多いです。

こちらも$(this)からアクセスが出来ます。

参考 jQueryでdataの取得・変更・セレクタ指定方法【サンプルコード有】

<p data-text="fuga">サンプルテキスト1</p>
<p data-text="hoge">サンプルテキスト2</p>
<p data-text="piyo">サンプルテキスト3</p>

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

---

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

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

以上、jQueryで$(this)の使い方、でした。