jQueryを使用したセレクターのソート

jQueryを使用してセレクターのソートを行う際は、arrayクラスのsort()関数を使用する。
sort関数は、引数なしも実行可能だが、
ソート条件を指定できる。

sort()の戻り値(aとbをソートした場合)

• 1:bがaの手前に移動する
• 0:順序の変化なし
• -1:aがbの手前に移動する

以下にセレクトボックスをテキストでソートするサンプルを記述する。

Sortサンプル

<select multiple=true id="sortThis">
  <option value="2">GRP02</option>
  <option value="1">GRP01</option>
  <option value="3">GRP03</option>
</select>
<input type="submit" value="do sort" id="sub" /> 

<script>
  $(function(){
    $("#sub").on("click", function(){
      // 昇順にソートする関数
      var item = $("#sortThis").children().sort(function(a,b){

       //textでソート
        var sortA= a.text;
        var sortB = b.text;

        if (sortA > sortB) {
          return 1;
        } else if (sortA < sortB) {
          return -1;
        } else {
          return 0;
        }

      });

      $("#sortThis").append(item);

    });

  });
</script>