jQuery riordina gli elementi dell'elenco in base alla classe

Question

Esiste un modo semplice per riordinare gli elementi dell'elenco utilizzando una classe?

Desidero specificare una classe per mettere in primo piano tali elementi all'inizio dell'elenco, con gli altri elementi dell'elenco elencati di seguito.

<ul class="order-me"> 
    <li class="">normal content</li> 
    <li class="">normal content</li> 
    <li class="featured">featured content</li> 
    <li class="">normal content</li> 
    <li class="featured">featured content</li> 
    <li class="">normal content</li> 
    <li class="">normal content</li> 
</ul> 

output desiderato:

<ul class="order-me"> 
    <li class="featured">featured content</li> 
    <li class="featured">featured content</li> 
    <li class="">normal content</li> 
    <li class="">normal content</li> 
    <li class="">normal content</li> 
    <li class="">normal content</li> 
    <li class="">normal content</li> 
</ul> 

Grazie!

Answer 1

È possibile aggiungere gli elementi .featured ai rispettivi valori ul per spostarli in cima all'elenco. Prova questo:

$('.featured').prependTo('.order-me'); 

Example fiddle

Answer 2

Per aggiungere alla risposta di @Rory McCrossan, ho aggiunto la possibilità di ordinare con pulsanti di navigazione

$("ul.order-nav li").click(function() { 
    // Find the Data attribute from unordered list [.order-nav] 
    var sortClass = '.' + $(this).data('sort-by'); 
    // Prepent the [li] with matching class to top of [ul] 
    $(sortClass).prependTo('.order-me'); 
}); 

Here is the Fiddle