【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】ブラウザのタブが非アクティブ時でもsetIntervalの挙動について！

丁度、jQueryで自動的にスライドさせて画像が切り替わり、ボタンをクリックする …

: jQuery ちょっとHTML操作

今更ながら、使ったことがないので調べてみてちょっと知ったのでメモ。 wrapAl …

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

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

: 【jquery】$.postを利用してCSVを読み込む

jQueryの$.postを利用してCSVを読み込む案件がありそうだったので、今 …

: jQuery 　要素集合の特定要素とそれ以外の要素の操作

以前にも書いたが、よくjQueryやActionScriptでは下記のようロジッ …

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

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

: 読み込んだjsonファイルをjqueryでフィルタリング処理の練習

jsonファイルで、読み込んだ画像リストを表示するのは、まぁそんな難しくないけど …

: 【jQuery】facebook風スライドメニューをちょっと作ってみた結果

最近、皆さんfacebookを日々使ってると思いますがあのメニューを左からスライ …

PREV: 【jQuery】画像のloadイベントがIE8で動作しない時の解決法
NEXT: 【jQuery】スクロールしてヘッダーやナビを上部に固定するには？