Sort ASC

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

CSSに関しては一部CSSライブラリを採用しているので併用してください。

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

DEMO
文字列テスト

並び替え：昇順

並び替え：降順

並び替え：昇順

並び替え：降順

使い方

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

sorts(target,size);

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

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

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

HTML
Script

function sorts(tar,type,order){
    if(!$('sortMod-li')[0]){
      $('.sortMod').each(function(){
        $(this).children().addClass('sortMod-li');
      });
    }
    let $sortLi = $(tar).children('.sortMod-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;} //正順
          }
        }
      })
    );
  }

内部値を参照

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

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

HTML

DEMO

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

並び替え：昇順

並び替え：降順