Sortieren onclick funktioniert nur einmal

Question

Ich habe ein Skript, das eine Liste von divs basierend auf ihrem Datenattribut sortiert. Die Sortierfunktionen sind an klickbare divs basierend auf ID gebunden. Momentan, wenn ich auf eines der divs klicke, werden die Objekte korrekt sortiert, aber nur einmal. Nach der Sortierung in aufsteigender Reihenfolge (nach oben) kann ich nicht nach absteigend sortieren, außer wenn ich die Seite aktualisiere. jsfiddle: https://jsfiddle.net/4ttjxwme/2/ Unten ist das Skript, jede Hilfe wird geschätzt!

<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

Da Sie jquery Objektreferenzen für die sortedArrays var sortedDivsDown = $(".unsorted").find("div").toArray().sort(sortDown);, zum zweiten Mal um die verwenden, ist .unsorted div Element leer und die Elemente sind jetzt in der .loanIndicators div.

Sie können dieses Problem beheben, indem Sie den unten Wähler mit den indicator div Elemente zu finden:

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

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

Dies wird in Ihrem Fall arbeiten, da alle Elemente in einem der beiden div-Elemente sein.

Hier ist eine funktionierende JSFiddle