childrenのテキストをeachで取得

Question

下記の要素特定の親要素に含まれる兄弟要素(.bar)のテキストをchildrenで指定しつつ
eachでそれぞれのtext();をarray.pushで配列に格納したいのですが、Developertool上以下のエラーメッセージがthrowされます。
[Error Message]
Uncaught TypeError: elem.text is not a function

可変である複数の.bar要素をダブルクリックした際に特定の配列に格納したいということが
目的なのですが、原因と解決方法をどなたかご教示願えますでしょうか。

よろしくお願いいたします。

<div id="hoge" style="display:flex;">
  <div class="bar">apple</div><!--実際には .bar要素は動的に生成される可変要素-->
  <div class="bar">banana</div>
  <div class="bar">peach</div>
</div>

$(function(){
  $(document).on('dblclick','.bar',function(){
var collection =[];
$('#hoge').children('.bar').each(function(num,elem){
 collection.push(elem.text());
}
)
})
//期待する結果 collection =['apple','banana','peach'];

Answer 1

// collection.push(elem.text());
//                  ↓   ↓
   collection.push($(elem).text());

Comments

[maguzo]

kei344様
ありがとうございます。解決することができました。.text()とはjquery objectに対して使用されるメソッドであるため$(elem)にする必要があると調べることができました。
それでは本件で失敗の元となったelemとは一体何者なのでしょうか？elem自体をconsole.logして出力される内容もオブジェクトのように見えるのですが、素人の感覚で申し訳ないのですが、この違いが理解できず、もし差し支えなければご教示願えますでしょうか。

[kei344]

DOM Element です。getElementById とかで取得できる物と同じです。

【.each() | jQuery API Documentation】
https://api.jquery.com/each/#each-function

【document.getElementById - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

[maguzo]

早速ありがとうございます
$(elem)がJqueryObjectでelemがDom Elementですね。
.text()はJqueryObjectに対して使用されるメソッドであると整理することができました。
詳細はご案内のサイトで改めて調べてみようと思います。
お力添え、ありがとうございます。