【JavaScript】連想配列の要素をソートして並び替えてみる

2016/05/01 2016/05/02

久しぶりにjQueryを業務で弄っています。で、リストの一覧をアルファベット順に要素の並び替るプログラムをjQueryとJavaScriptでやってみました。

1 どのように要素を並び替えるか
2 htmlソースの説明
3 JavaScriptのソースコード
4 まとめ

どのように要素を並び替えるか

今回は、リストの並び替えなので例えばブランドリストがあってその各ブランドごとのトップスなどのサブカテゴリーがあるようなイメージです。
そのブランド名をアルファベット順に並び替えるという感じです。下記にhtmlのソースを載せておきます。
ただ注意点としてあくまで下記のようなhtmlで組んだ場合なので参考程度にしてもらいこういう方法もあるんだ程度で呼んでもらえると助かります。

//ブランドリスト
<ul>
	<li class="brand"><span>Reebok</span>
		<ul class="sub">
			<li>Reebokのサブカテゴリー</li>
			<li>Reebokのサブカテゴリー</li>
			<li>Reebokのサブカテゴリー</li>
		</ul>
	</li>
	
	<li class="brand"><span>AMERICANRAGCIE</span>
		<ul class="sub">
			<li>AMERICANRAGCIEのサブカテゴリー</li>
			<li>AMERICANRAGCIEのサブカテゴリー</li>
			<li>AMERICANRAGCIEのサブカテゴリー</li>
		</ul>
	</li>
	
	<li class="brand"><span>NIKE</span>
		<ul class="sub">
			<li>NIKEのサブカテゴリー</li>
			<li>NIKEのサブカテゴリー</li>
			<li>NIKEのサブカテゴリー</li>
		</ul>
	</li>
	
	<li class="brand"><span>BEAMS</span>
		<ul class="sub">
			<li>BEAMSのサブカテゴリー</li>
			<li>BEAMSのサブカテゴリー</li>
			<li>BEAMSのサブカテゴリー</li>
		</ul>
	</li>
</ul>

//ブランドリスト

<ul>

<li class="brand">Reebok

<li>Reebokのサブカテゴリー</li>

</ul>

</li>

<li class="brand">AMERICANRAGCIE

<li>AMERICANRAGCIEのサブカテゴリー</li>

</ul>

</li>

<li class="brand">NIKE

<li>NIKEのサブカテゴリー</li>

</ul>

</li>

<li class="brand">BEAMS

<li>BEAMSのサブカテゴリー</li>

</ul>

</li>

</ul>

上記の様なhtmlがあって見ていただくと判ると思うが、ブランド名だけならJavaScriptで要素を並び替えるのは簡単なんですが、サブカテゴリーがあるとちょっとひと手間加えないといけません。
ではどうやってサブカテゴリーも一緒に並び替えればいいのか試してみたところ

ループ処理でliタグごとに「ブランド名とhtmlソースを取得してオブジェクトにして配列を作成
JavaScriptのsort()の比較関数を利用して配列を並び替え
並び替えた配列をhtmlとして出力する

といった流れでいきたいと思います。

htmlソースの説明

まず並び替えるにあたって各liタグごとの「ブランド名」が必要になってきますのでブラント名のliタグにクラス名「brand」を設定してブランド名をテキスト要素と取得する必要があるのでspanタグで囲っています。
ちなみに上記のhtmlのサブカテゴリーのsubクラスに関してはCSSで装飾する為のクラスです。

	<li class="brand"><span>Reebok</span></li>

1	<li class="brand"><span>Reebok</span></li>

JavaScriptのソースコード

さて、ここから本題であるJQueryとJavaScriptを利用して要素の並び替えをしたいと思います。
今回はボタンをクリックしたら要素を並び替えるという処理をしました。

var brand_arr = []; //要素をいれる配列

$("button").bind("click", function() {
  $("li.brand").each(function(i) {

    //ブランドごとに連想配列にして配列に追加
    brand_arr[i] = {
      name: $(this).find("span").text(),
      source: $(this).html()
    };

  });

  //配列を並び替え
  brand_arr.sort(
    function(a, b) {
      var a_name = a.name;
      var b_name = b.name;
      if (a_name < b_name) return -1;
      if (a_name > b_name) return 1;
      return 0;
    });
	
  //配列を出力する
  for (var j = 0; j < brand_arr.length; j++) {
    $("li.brand").eq(j).html(brand_arr[j].source);
  }
});

var brand_arr = []; //要素をいれる配列

$("button").bind("click", function() {

$("li.brand").each(function(i) {

//ブランドごとに連想配列にして配列に追加

brand_arr[i] = {

name: $(this).find("span").text(),

source: $(this).html()

};

});

//配列を並び替え

brand_arr.sort(

function(a, b) {

var a_name = a.name;

var b_name = b.name;

if (a_name < b_name) return -1;

if (a_name > b_name) return 1;

return 0;

});

//配列を出力する

for (var j = 0; j < brand_arr.length; j++) {

$("li.brand").eq(j).html(brand_arr[j].source);

}

});

ループ処理でliタグごとにブランド名とhtmlソースを取得する

ループ処理や要素を取得するのはjQueryで処理しますが、まず要素を並び替えるには配列にする必要があるので各liタグごとのループ処理でブランド名とhtmlソースを取得します。

var brand_arr = []; //要素をいれる配列
$("li.brand").each(function(i) {

    //ブランドごとに連想配列にして配列に追加
    brand_arr[i] = {
      name: $(this).find("span").text(),
      source: $(this).html()
    };

  });

var brand_arr = []; //要素をいれる配列

$("li.brand").each(function(i) {

//ブランドごとに連想配列にして配列に追加

brand_arr[i] = {

name: $(this).find("span").text(),

source: $(this).html()

};

});

htmlソースはjQeuryのhtml()で取得できます。取得する範囲はbrandクラスのliタグの中身全部です。span開始タグからサブカテゴリーのulの終了タグまでの要素を全部htmlソースとして取得しておきます。
また、配列を並び替えるにはブランド名のアルファベットをテキスト要素として比較する必要があるのでspanタグの中身をjQueryのtext()で取得しています。

連想配列として配列に追加する

また、配列に追加する際にはブランド名を「name」とし取得したhtmlソースを「source」とした連想配列にしてliタグごとのワンセットにしました。

理由は、並び替えた後にhtmlで要素を出力しますが、セットにしておかないとブランド名だけ並び替えられてサブカテゴリーの並び替えられない出力した後にブランド名とサブカテゴリーが一致しないことになってしまうからです。

JavaScriptのsort()の比較関数を利用して配列を並び替える

配列を並び替えるにはJavascriptのsort()を使用します。ただ通常の配列であればsortを使えばアルファベット順に要素を並び替えてくれますが、今回は配列の中身が連想配列の為ブランド名を比較するためにはsort関数に比較条件を設定した無名関数を引数で渡すことでができるのでそれで処理します。
いわゆる比較関数と呼ばれるものですが、例えば日本語順に並び替えたい・・など通常のsort()では出来ない場合に比較関数と使うといいですが説明が長くなるのでネットで検索してみてください。

JavaScriptの配列を特定の順番にソートする方法｜WEB Drawer

JS：配列の正しいソート方法

JavaScript つい忘れてしまう配列のソート方法

並び替えた配列をhtmlとして出力する

JavaScriptのsort()を使って並び替えが終わると、連想配列のnameを基準にアルファベット順に並び変わってると思いますので、その順番でjQueryのhtml()で出力します。その際は連想配列のsourceを出力すればブランド名とサブカテゴリーもhtmlソースで出力されます。

//配列を出力する
for (var j = 0; j < brand_arr.length; j++) { 
	$("li.brand").eq(j).html(brand_arr[j].source);
}

//配列を出力する

for (var j = 0; j < brand_arr.length; j++) {

$("li.brand").eq(j).html(brand_arr[j].source);

}

まとめ

今回はJavaScriptのsort()を使いましたがjQueryにもありますので、そちらも試されるといいかもです。sort()はいろいろ比較関数があるので、並び替えるときに知っておくと便利ですね。

- javascript, jquery javascript, jquery

人気ブログランキングへ

Message コメントをキャンセル

コメントを投稿するにはログインしてください。

: 【jQuery】クリックイベントを切り替える

例えば、AとBボタンがあってAボタンをクリックしたらBボタンをクリックできないよ …

: 【jQuery】スライドコンテンツをjQueryのプラグインで作ってみた！！

以前、作成したjQueryの簡易画像ビュアーのコンテンツバージョンを作成しました …

: jQuery フォームの操作～特定の要素の絞込み～

フォーム要素をjQueryで扱うときにフォームをデコレーションする場面も多いと思 …

: CSS3のアニメーションをjavascriptで実行する方法

よくCSS3でロールオーバーでアニメーションさせるのありますが、まぁそれは、普通 …

: 【JavaScript】配列をシャッフルして要素をランダムに入れ替える方法

JavaScriptで配列をシャッフルしてその要素をランダムに表示させるにはどう …

: PostMessageを使ったクロスドメイン通信によるメッセージの送受信を試してみた！

JavaScriptでいろいろ実装していると時に別ウィンドウを開いて、呼び出し元 …

: JavaScriptで動画コンテンツを操作してみた！

前回、html5のvideoタグについて説明しました。 html5のvideoで …

: html5のwebStorage(localStorage)でデータを保存する

さて最近、html5が当たり前になってきましたね♪それに伴って新しい機能が追加さ …

: jQuery で特定の要素のインデックス番号を取得　~ツールチップ~

ツールチップを作成してロールオーバーが必要なときに、その要素がインデックスの何番 …

: 【jQuery】スマートフォンやPC用に画像を切り替える方法

まぁスマートフォンとPC用だと画像の切り替えに迷う。基本的に画像をスマートフォン …