Sort ASC

数字と文字列の並び替え機能

詳しい導入事例は導入方法を参照してください。

昇降順にソートする機能。

DEMO
文字列テスト

並び替え：昇順

並び替え：降順

並び替え：昇順

並び替え：降順

使い方

関数を実行することで+-.mod_sortAsc-+の子要素のテキストを参照して並び替えます。
ターゲットのサーチに使用するので+-.mod_sortAsc-+にはユニークなIDかCLASSを設定してください。

sorts(target,size);

例）sorts('#hoge','small');

[target] 並べ替える対象を指定。
[size] 昇降順の指定。 +-small-+ or +-big-+

+-.mod_sortAsc-+の子要素全てが対象となるので、並び替えの対象にならない要素は含めないでください。

HTML
Script

function sorts(tar,order){
  if(!$('mod_sortAsc-li')[0]){
    $('.mod_sortAsc').each(function(){
      $(this).children().addClass('mod_sortAsc-li');
    });
  }
  let $sortLi = $(tar).children('.mod_sortAsc-li');
  let Adata = '';
  let Bdata = '';

  $(tar).html(
    $sortLi.sort(function(a,b){
      if($sortLi.data('sort') === undefined || $sortLi.data('sort') === ''){
        //data属性なし
        Adata = $(a).text();
        Bdata = $(b).text();
      } else {
        //data属性あり
        Adata = $(a).data('sort');
        Bdata = $(b).data('sort');
      }

      if($.isNumeric(Adata)){ //数字
        if(order === 'big'){
          return Number(Bdata) - Number(Adata); //大きい順
        } else if(order === 'small'){
          return Number(Adata) - Number(Bdata); //小さい順
        }
      } else { //文字列
        if(order === 'big'){
          if(Adata < Bdata){return 1;} //逆順
        } else if(order === 'small'){
          if(Adata > Bdata){return 1;} //正順
        }
      }
    })
  );
}

内部値を参照

対象の文字列ではなく、指定した内部値を参照します。

+-.mod_sortAsc-+の子要素（並びが変わる要素）に[data-sort]属性を追加し、順番となる値を入れてください。

HTML

DEMO

肆番目
弐番目
伍番目
壱番目
参番目

並び替え：昇順

並び替え：降順