EITCH DESIGN エイチ デザイン / ソート: 昇降

menu

ソート: 昇降

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

  • CODE
  • DEMO
  • 説明
  • 使い方
  • 解説

準備中

sorts('object','str','small');
sorts('object','str','big');
sorts('object','int','small');
sorts('object','int','big');
第一引数にターゲットを指定。
第二引数に数字か文字列かを指定。
第三引数に並び順を指定。

[ul.sortMod li]のテキストを参照して並び替え。
[ul.sortMod li]の[data-sort]属性に値を入れれば、そちらを参照。

  • html

    copy
  • css

    copy
    none
  • jQuery

    copy
    $('.sortMod').each(function(){
      $(this).children('li').addClass('sortMod-li');
    });
    
    function sorts(tar,type,order){
      var $sortLi = tar.children('.sortMod-li');
      tar.html(
        $sortLi.sort(function(a,b){
          if($sortLi.data('sort') === undefined || $sortLi.data('sort') === ''){
            //data属性なし
            var Adata = $(a).text();
            var Bdata = $(b).text();
          } else {
            //data属性あり
            var Adata = $(a).data('sort');
            var Bdata = $(b).data('sort');
          }
    
          if(type === 'str'){ //数字
            if(order === 'big'){
              return Number(Bdata) - Number(Adata); //大きい順
            } else if(order === 'small'){
              return Number(Adata) - Number(Bdata); //小さい順
            }
          } else if(type === 'int') { //文字列
            if(order === 'big'){
              if(Adata > Bdata){return 1;} //正順
            } else if(order === 'small'){
              if(Adata < Bdata){return 1;} //逆順
            }
          }
        })
      );
    }
  • 1
  • 4
  • 2
  • 5
  • 3
  • C
  • A
  • E
  • B
  • D
並び替え