onclickは1回だけソートします

Question

データ属性に基づいてdivのリストをソートするスクリプトがあります。ソート関数は、IDに基づいてクリック可能なdivに結び付けられます。現在、divのいずれかをクリックすると、アイテムは正しくソートされますが、一度だけソートされます。昇順で並べ替えた後（上）、ページを更新しない限り降順で並べ替えることができません（下）。 jsfiddle：https://jsfiddle.net/4ttjxwme/2/ 以下はスクリプトですが、何か助けていただければ幸いです！

<script> 
     $(document).ready(function() { 
      $("#down").on('click', function(){ 
       var sortedDivsDown = $(".unsorted").find("div").toArray().sort(sorterDown); 
       $.each(sortedDivsDown, function (index, value) { 
        $(".loanIndicators ").append(value); 
       }); 
       function sorterDown(b, a) { 
        return b.getAttribute('rel') - a.getAttribute('rel'); 
       }; 
      }); 
     }); 

     $(document).ready(function() { 
      $("#up").on('click', function(){ 
       var sortedDivsUp = $(".unsorted").find("div").toArray().sort(sorterUp); 
       $.each(sortedDivsUp, function (index, value) { 
        $(".loanIndicators ").append(value); 
       }); 
       function sorterUp(a, b) { 
        return a.getAttribute('rel') - b.getAttribute('rel'); 
       }; 
      }); 
     }); 
    </script> 

Answer 1

あなたがsortedArrays var sortedDivsDown = $(".unsorted").find("div").toArray().sort(sortDown);のためのjQueryオブジェクト参照を使用しているので、周りに二回目は、.unsorted div要素は空で、要素が.loanIndicatorsのdivになりました。

あなたはindicator div要素を見つけるには、以下のセレクタを使用することによってこの問題を解決することができます：すべての要素が2つのdiv要素のいずれかになりますので、これは、あなたのケースで動作します

var sortedDivsDown = $(".unsorted,.loanIndicators").find("div").toArray().sort(sortDown); 

var sortedDivsUp = $(".unsorted,.loanIndicators").find("div").toArray().sort(sortUp); 

を。

ここでは動作していますJSFiddle