jqのsort()法を用いてページ要素domを昇降順に配列する

ここまで書いてから最適化する

html

1.並べ替えボタン

<span class="box">
  <span id="sort-down"> span>
  <span id="sort-up" class="focus"> span>
span>

2.domリスト

<div class="grade" id="sort-box">
      <div class="once">
        <span class="school"> span>
        <div class="limit">
          <span class="slide" style="width:70%;"> span>
          <span class="percent">70%span>
        div>
      div>
      <div class="once">
        <span class="school"> span>
        <div class="limit">
          <span class="slide" style="width:60%;"> span>
          <span class="percent">60%span>
        div>
      div>
      <div class="once">
        <span class="school"> span>
        <div class="limit">
          <span class="slide" style="width:30%;"> span>
          <span class="percent">30%span>
        div>
      div>
      <div class="once">
        <span class="school"> span>
        <div class="limit">
          <span class="slide" style="width:80%;"> span>
          <span class="percent">80%span>
        div>
      div>
      <div class="once">
        <span class="school"> span>
        <div class="limit">
          <span class="slide" style="width:30%;"> span>
          <span class="percent">30%span>
        div>
      div>
    div>

jqコード

  // 
  $('body').on('click','#sort-down', function(){
    var domList = $('#sort-box .once').get();
    domList.sort(function(a,b){
      var elOne = $(a).find('.percent').text();
      var elTwo = $(b).find('.percent').text();
      if(elOne > elTwo) return 1;
      if(elOne < elTwo) return -1;
      return 0;
    });
    $('#sort-box').append(domList)
  });
  // 
  $('body').on('click','#sort-up', function(){
    var domList = $('#sort-box .once').get();
    domList.sort(function(a,b){
      var elOne = $(a).find('.percent').text();
      var elTwo = $(b).find('.percent').text();
      if(elOne > elTwo) return -1;
      if(elOne < elTwo) return 1;
      return 0;
    });
    $('#sort-box').append(domList)
  });