javascript - Sort <li> with jQuery -

currently have language select simple <ul> <li>s , <a>s inside.

every <li> has class - lang-inactive or lang-active. depends on language user using right now.

the <li>s .lang-inactive hidden default. when .hover() ul other options showed.

here simple example.

but can see first <li> french, , when i'm using english , hover language bar french appears on english.

is there way can sort <li> depending on whether lang-active or lang-inactive. inactive ones should appear below active one.

my current code is:

var ul = $('#languages-iv');     ul.css('position', 'absolute');     ul.css('top', 5);     li = ul.children('li');      li.detach().sort(function(a,b) {        //how sort     });      ul.append(li); $("#languages-iv").hover(function(){     $('.lang-inactive').slidetoggle(); }, function() {     $('.lang-inactive').stop().slidetoggle(); }); 

this executed on page-load (or whenever language selector gets created) should push active language first child.

$('.lang-active').prependto('#languages-iv'); 

demo:

http://jsfiddle.net/gqfpv/