【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 コメントをキャンセル

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

: 【JavaScript】子ウィンドウ／親ウィンドウのお互いの要素を操作するには！？

以前、iframe内から親ウィンドウの要素を操作する記事を書きました。 ifra …

: 【jQuery】TOPへ戻るボタンでスクロールさせる！！

ブログとか縦に長いサイトだとよくスクロールしていくとフワッと「ページトップへ」と …

: 要素を追加する　

最近やたらとjQueryに頼って生きてます。jQueryだと要素の追加が簡単だが …

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

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

: 【javascript】剰余（%）演算子を使って値が繰り返しループする処理をやってみた!

ちょっとプログラムで、配列の長さの値の範囲内で繰り返す値をどうすればいいのか検証 …

: ajaxによるxmlの読み込み

javascriptでも外部ファイルを読み込む処理って今や当たり前になりましたね …

: 【JavaScript】複数の画像の読み込みが完了した時のイベントを感知するには？？

複数のイメージ画像を読みが完了した時のイベントを感知するにはどうしたらいいのだろ …

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

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

: 【jQuery】画像のロード画面でフェードイン

画像をロードする時のロード画面ってなにげに分からないなーと思い調べてメモ。基本 …

: 【jQuery】マウスの座標をjQueryを使って調べる方法！

マウスに追従するようなツールチップなどを作るときにマウスの座標ってどう取得するか …