thisの意味が分からない。

Question

アコーディオンのコードの一部なんですが、このjQueryの二行目のthisの意味は"faq-list-item"を指しているんでしょうか？
thisの意味がいまいち分かりません。。

 <li class="faq-list-item">
            <h3 class="question">HTMLは習得済ですか？</h3>
            <span>+</span>
            <div class="answer">
              <p>習得済です。</p>
            </div>
          </li>

$(".faq-list-item").click(function() {
    var $answer = $(this).find(".answer");
    if($answer.hasClass("open")) { 
      $answer.removeClass("open");

Comments

[jun68ykt]

ちょっとしたアドバイスなのでこちらに書きます。手前味噌の投稿で恐縮ですが、https://qiita.com/jun68ykt/items/0eb34062572bcb63acf7 に引用しましたとおり、JQueryの作者John Resig氏著の書籍「JavaScript Ninjaの極意」には、 this の理解の仕方として、「thisは 呼び出しコンテクスト（invocation context)と呼ぶのが正しい。」と書かれています。この呼び方がしっくりくるように、様々なthisの説明を読まれるとよいかもしれません。

[sanaginagi]

アドバイスありがとうございます！thisについて少し勉強してみます。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

このjQueryの二行目のthisの意味は"faq-list-item"を指しているんでしょうか？

そのとおりです。jQueryのイベントハンドラにわたすfunctionのthisはその対象となる要素（上の例の場合はクリックされた要素＝faq-list-item）を指します。

Javascriptのthisは結構複雑なので、この辺の記事を読むなりしてしっかりと理解することをおすすめします。

Comments

[sanaginagi]

素早い解答と参考URLまでありがとうございます。
スッキリしました！