Liste nach Datenattribut sortieren (mit jquery metadata plugin)

Question

Es fällt mir schwer herauszufinden, wie man eine Liste basierend auf einem der Schlüssel/Wert-Paare im Datenattribut sortiert.

<ul> 
    <li data="{name:'Foo', number: '1'}"> 
     <h3>Foo</h3> 
    </li> 

    <li data="{name:'Bar', number: '2'}"> 
     <h3>Bar</h3> 
    </li> 
</ul> 

Hier ist die jQuery. Ich setze die Metadaten attr und greife darauf zu. All das funktioniert gut.

jQuery.metadata.setType("attr", "data"); 

$(document).ready(function(){ 

    // loop through each list item and get the metadata 
    $('ul li').each(function() { 
     console.log($(this).metadata()); 
     // shows the following - Object {name="Foo", number="1"} 
    }); 

)}; 

Beispiel: Ich müsste nach Name aufsteigend sortieren. Kann mir jemand in die richtige Richtung zeigen?

EDIT:

Hier ist die Form ich die Sortierung auszulösen bin mit:

<form name="filterForm"> 
    Sort: 
    <select name="sort" size="1"> 
     <option value="nameAsc" <cfif URL.sort EQ 1>selected="selected"</cfif>>Name A to Z</option> 
     <option value="nameDesc" <cfif URL.sort EQ 2>selected="selected"</cfif>>Name Z to A</option> 
     <option value="numberAsc" <cfif URL.sort EQ 3>selected="selected"</cfif>>Number 1-10</option> 
     <option value="numberDesc" <cfif URL.sort EQ 4>selected="selected"</cfif>>Number 10-1</option> 
    </select> 
</form> 

Und die jquery das Änderungsereignis zu handhaben, aber ich bin nicht sicher, ob ich Mikael Eliasson umgesetzt Code korrekt, weil ich bin mir nicht sicher, wo der Wert der zu übergeben, was ausgewählt wurde:

$('form[name=filterForm] select').change(function(){ 

    var sortBy = this.value; 

    var arr = [] 

    // loop through each list item and get the metadata 
     $('ul li').each(function() { 
      var meta = $(this).metadata(); 
      meta.elem = $(this); 
      arr.push(meta); 
     }); 

    arr.sort(appendItems()); 

    function appendItems(){ 

     //Foreach item append it to the container. The first i arr will then end up in the top 
     $.each(arr, function(index, item){ 
      item.elem.appendTo(item.elem.parent()); 
     }  

    } 


}); 

Answer 1

Javascript hat eine whi Sortierfunktion ch kann eine Funktion als Argument annehmen. Diese Funktion sollte bei benutzerdefinierten Vergleichen verwendet werden. http://www.w3schools.com/jsref/jsref_sort.asp

sehen Also, was ich tun würde, ist Somethings wie diese

var arr = [] 
// loop through each list item and get the metadata 
    $('ul li').each(function() { 
     var meta = $(this).metadata(); 
     meta.elem = $(this); 
     arr.push(meta); 
    }); 
arr.sort(compare); 

//Foreach item append it to the container. The first i arr will then end up in the top 
$.each(arr, function(index, item){ 
    item.elem.appendTo(item.elem.parent()); 
}); 

EDIT: Aktualisierte Syntax oben .each Schleife - Festsetzung Syntaxfehler

EDIT: ein Fehler in der letzten jede Schleife Korrigierte

EDIT2: ich bin Aktualisierung mit der Funktion vergleichen Auf Wunsch

function compare(a, b){ 
    return a.name - b.name; 
}