HTMLから値を複数配列で取得し並び替えたい

Question

JQueryを使用し、HTMLから値を複数配列で取得し、並び替えようとしています。

<div>
 <span class="fruit">りんご</span>
 <span class="number">1個</span>
</div>
<div>
 <span class="fruit">みかん</span>
 <span class="number">2個</span>
</div>

var name =  $("div").children('.fruit').text();
var count = $("div").children('.number').text();
name = name.reverse();
count = count.reverse();

HTMLからの取得結果
"りんごみかん"
"1個2個"

これを"みかんりんご"、"2個1個"にしたくreverse()を入れたのですがnot a functionというエラーが表示され上手くいきません。
どうすれば配列内の並び替えができるのでしょうか？

Answer 1

.reverse()は配列のメソッドになります。
こちらを参考に配列にしてから.reverse()してあげましょう。

Answer 2

$(function(){
  var name =  $('.fruit').map(function(){return $(this).text();}).get().reverse().join('');
  var count =  $('.number').map(function(){return $(this).text();}).get().reverse().join('');
  console.log(name);
  console.log(count);
});

Answer 3

name と count が配列になっていないので、そこを直しましょう。

let name = [...document.querySelectorAll('div .fruit')].map(
    element => element.textContent);
// count も同様

Comments

[退会済みユーザー]

直したらできました！ありがとうございました！