thisとfindを用いて子要素の.answerを取得し代入するとは？

Question

現在ProgateのjQuery基礎編を勉強中なのですが、どうしても20/21の以下でつまづいてしまいます。。

指示は以下のようになっていて、
・clickイベントの中で、
変数$answerを宣言し、thisとfindを用いて、子要素の
.answerを取得し代入してください。

どうしてもこれは違うようなのですが、上から3行目の$(this).find("answer");
の部分がよくわかりません。

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

どなたかthisとfindを用いて、子要素の
.answerを取得し代入してください。という部分をご教示いただけると幸いです。

Answer 1

動いている所を見るのが一番だと思うので、コンソールを仕込んでみました。
それぞれ、クリックした時にどんな値が表示されるかをご覧ください。

$('.faq-list-item').click(function(){ 
  var $answer = $(this).find(".answer");
  console.log('this',this);
  console.log('$(this)', $(this));
 
  if ($answer.hasClass('open')){ 
    $answer.removeClass('open'); 
  } else { 
    $answer.addClass('open'); 
  } 
});

Comments

[eclecticmars]

ご回答ありがとうございます。コンソールの中身に関しては上記のコンソールと下記のコンソールの違いはどのようなものになるのでしょうか？目的に基づいた全体的な構成を頂き、助かりました。

[yamato_hikawa]

上:クリックされたDOM要素
下:上記をjQueryオブジェクトに変換したもの

という違いです。
jQueryの機能を使う場合は下に変換する必要があります。

Answer 2

//clickイベントの中で、 
$('.faq-list-item').click(function(){
    //変数$answerを宣言し、thisとfindを用いて、子要素の.answerを取得し代入してください。
    var $answer = $(this).find('.answer');
});

こちらで、指示していることは解決できると思います。
上記のコードで、$(this)は$('.faq-list-item')要素を指していて、
find('.answer')は answer classを持っている要素を全部探して返してくれます。

つまりvar $answer = $(this).find('.answer');というのは、
.faq-list-item要素の中で、.answer要素を全部探し出して$answer変数に代入するという
ことになります。

Comments

[eclecticmars]

ご回答ありがとうございました。宣言自体に代入することが想像できてませんでした。ありがとうございます。

[yano199102]

私も同じところで理解ができず困っていましたので、とても参考になりました。ありがとうございました。