グラビカ学習帳～新宿のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

配列にjQueryオブジェクトを複数格納し、並べ替えるメモです。
配列操作にやや苦手意識があるので、思ったより簡単にできた、という感じで。

●HTML

<ul class="list">
  <li class="item" data-num="025">アイテム1</li>
  <li class="item" data-num="010">アイテム2</li>
  <li class="item" data-num="075">アイテム3</li>
  <li class="item" data-num="050">アイテム4</li>
</ul>

●JavaScript

const $list = $('.list'); // リスト要素
const $items = $list.find('.item'); // リスト内の全アイテム

// アイテムを格納する配列を宣言
const itemsArray = [];

// 各アイテムをjQueryオブジェクトとして配列に追加
$items.each(function() {
  itemsArray.push($(this));
});

// data-num属性の値で昇順ソート
itemsArray.sort((a, b) => {
  // 各アイテムのdata-num属性を取得し、数値に変換
  const numA = parseInt(a.attr('data-num'), 10);
  const numB = parseInt(b.attr('data-num'), 10);
  // 数値として比較(昇順)
  return numA - numB;
});

// リストを空にしてから、ソート済みアイテムを追加
$list.empty().append(itemsArray);

●ポイント
・a, b に比較対象となるjQueryオブジェクトが入るので、jQuery用のメソッドを使用して比較する値を取得する。
・配列はそのまま.append()／.prepend()することができる。
・サンプルは数値で比較しているが、比較したい内容に合わせて.sort()の内容を変更する。