jQuery Reorder-Liste Elemente basierend auf Klasse

Question

Gibt es eine einfache Möglichkeit, meine Listenelemente mit einer Klasse neu anordnen?

Ich möchte eine Klasse angeben, um diese Elemente am Anfang der Liste zuerst mit anderen Listenelementen, die unten aufgeführt sind, zu kennzeichnen.

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

gewünschte Ausgabe:

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

Dank!

Answer 1

Sie können die .featured Elemente an ihre ul Elemente voranstellen, um sie an den Anfang der Liste zu verschieben. Versuchen Sie folgendes:

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

Example fiddle

Answer 2

zu @Rory McCrossan Antwort hinzuzufügen, habe ich die Möglichkeit hinzugefügt, es zu sortieren mit Navigationstasten

$("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