Ordenar la lista según el atributo de datos (usando el complemento de metadatos jquery)

Question

Me está costando trabajo encontrar la manera de organizar una lista basada en uno de los pares clave/valor en el atributo de datos.

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

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

Aquí está el jQuery. Estoy configurando los atributos de metadatos y accediendo a ellos. Todo esto funciona bien.

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"} 
    }); 

)}; 

Ejemplo: Tendría que ordenar por Nombre en orden ascendente. ¿Alguien me puede apuntar en la dirección correcta?

EDIT:

Aquí es la forma que estoy usando para desencadenar la clasificación:

<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> 

Y el jQuery para manejar el evento de cambio, pero no estoy seguro de que he implementado Mikael Eliasson código correctamente, porque no estoy seguro de dónde pasar el valor de lo que estaba seleccionado:

$('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 tiene una función de clasificación WHI ch puede tomar una función como argumento. Se supone que esta función se debe usar cuando tiene comparaciones personalizadas. Ver http://www.w3schools.com/jsref/jsref_sort.asp

Así que lo que haría es algunas cosas como esta

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: Actualización sobre la sintaxis anterior .Cada bucle - la fijación de error de sintaxis

EDIT: Se ha corregido un error en la última cada bucle

Edit2: Por petición estoy actualizando con la función de comparación

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