javascript - jQuery/JS sort user list alphabetically in groups? -

i have user list i'm displaying. question is, how sort them alphabetically in groups of online statuses.

basically want users online displayed first, users away second, , offline users last. each of groups i'd have sorted alphabetically. user list looks this:

<ul>    <li data-uid="x" data-status="away">john</li>    <li data-uid="x" data-status="online">tom</li>    <li data-uid="x" data-status="online">mary</li>    <li data-uid="x" data-status="offline">xiang</li>    <li data-uid="x" data-status="away">chris</li>    <li data-uid="x" data-status="offline">peter</li>    <li data-uid="x" data-status="online">matt</li> </ul> 

and i'd them sorted this:

<ul>    <li data-uid="x" data-status="online">mary</li>    <li data-uid="x" data-status="online">matt</li>    <li data-uid="x" data-status="online">tom</li>    <li data-uid="x" data-status="away">chris</li>    <li data-uid="x" data-status="away">john</li>    <li data-uid="x" data-status="offline">peter</li>    <li data-uid="x" data-status="offline">xiang</li> </ul> 

i've tried using this answer starting point, can't manage them sorted in groups..

thanks

edit:

also i'm pulling live status updates ajax. i'm not sure how influence function, maybe it's possible later on target specific user , move him accordingly?..

try jquery code :

var array = ["away", "online", "offline"]  $.each(array, function(key, value) {     $('li[data-status="'+value+'"]').appendto('ul') }); 

and have fiddle : http://jsfiddle.net/vrz3x/1/