jQuery｢reverse｣で配列の順番を逆にする方法

2020年5月19日

jQueryのメソッド「.reverse()」は、配列の順番を逆順に並び替えるメソッド

今回は、jQueryで「配列の順番を逆順に並び替える」メソッド「.reverse()」について、その使い方をサンプルを交えて解説しよう。

.reverse()の機能とは？

reverseの機能

.reverse()は、要素に「配列の順番を逆順に並び替える」事ができるメソッド。
逆に言うと、「配列」しか逆順にできないので、jQueryオブジェクトの場合は「$.makeArray()やget()」などのメソッドで一旦「配列に変換」する必要がある。

例えば次のような配列["apple","orange","peach"];に対して.reverse();を使った場合、配列の順番は["peach", "orange", "apple"]のように順番が逆に変わる。

jQuery

$(function(){
  var myArray = ["apple","orange","peach"];
  myArray.reverse();
  console.log(myArray);
});

console

["peach", "orange", "apple"]

.reverse()の構文

「配列の順番を逆順に並び替える」構文

配列.reverse();

.reverse()でリストの順番を逆にする例

まず最初に.reverse()は「配列」の順番を逆にするメソッドなので、目的の「jQueryオブジェクト」を「配列」に変換する必要がある。

今回は$.makeArrayメソッドを使って「配列」に変換する例で解説しよう。

HTML

<button>ボタン</button>
<ol class="member">
 <li>真弓</li>
 <li>北村</li>
 <li>バース</li>
 <li>掛布</li>
 <li>岡田</li>
</ol>

jQuery

$(function(){
  $("button").on("click",function(){
     var myArray= $.makeArray($(".member li"));
     myArray.reverse();
     $(".member").html($(myArray));
  });
});

$.makeArrayメソッドは$.makeArray(jQueryオブジェクト)で「配列」に変換できるので

var myArray= $.makeArray($(".member li"));

としてmyArrayに配列を格納する。

次に配列を格納したmyArrayに対してreverseメソッドを適用して配列の順番を逆にする。

myArray.reverse();

最後に.html()メソッドを使って、$(".member")のHTMLの中身を書き換える。

$(".member").html($(myArray));

この時myArrayは配列のままなので、$(myArray)としてjQueryオブジェクトに戻してから使わないといけない点に注意しておこう。

これでリストの順番を逆にする事ができる！

HTML （jQuery反映前）

<button>ボタン</button>
<ol class="member">
 <li>真弓</li>
 <li>北村</li>
 <li>バース</li>
 <li>掛布</li>
 <li>岡田</li>
</ol>

HTML （クリック後）

<button>ボタン</button>
<ol class="member">
 <li>岡田</li>
 <li>掛布</li>
 <li>バース</li>
 <li>北村</li>
 <li>真弓</li>
</ol>

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント