Custom jQuery sorting on HTML navigation. How to order elements based on title? -

Custom jQuery sorting on HTML navigation. How to order elements based on title? -

i have custom navigation built apply specific sort order based on title. how go sorting menu instead of:

site 1, site 2, site 3, site 4

we site 3, site 2, site 4, site 1

<div class='navgroup' > <ul class='navsites'> <li> <a>site 1</a><span class='exspand'>[+]</span> <ul class='navsecondlevelsite'> <li><a href='/home.aspx' >home</a></li> <li><a href='/feedback.aspx' >feedback</a></li> <li><a href='/officesmaps.aspx' >offices maps & meeting rooms</a></li> <li><a href='/systemalerts.aspx' >system alerts</a></li> </ul> </a> </li> <li> <a>site 2</a><span class='exspand'>[+]</span> <ul class='navsecondlevelsite'> <li><a href='/page1.aspx' >page1</a></li> <li><a href='/page2.aspx' >page2</a></li> <li><a href='/page3.aspx' >page3</a></li> </ul> </a> </li> <li> <a>site 3</a><span class='exspand'>[+]</span> <ul class='navsecondlevelsite'> <li><a href='/page1.aspx' >page1</a></li> <li><a href='/page2.aspx' >page2</a></li> <li><a href='/page3.aspx' >page3</a></li> </ul> </a> </li> <li> <a>site 4</a><span class='exspand'>[+]</span> <ul class='navsecondlevelsite'> <li><a href='/page1.aspx' >page1</a></li> <li><a href='/page2.aspx' >page2</a></li> <li><a href='/page3.aspx' >page3</a></li> </ul> </a> </li> </ul> </div>

fiddle:

http://jsfiddle.net/colbs/uydll/

here's 1 approach requires array based on text. removes elements , appends them in order defined array

var navorder=['site 3','site 2','site 4','site 1']; var $nav=$('.navsites'); /* detach list items */ var $items=$nav.children().detach(); /* loop on navorder array */ $.each(navorder, function(_, txt){ $items.filter(function(){ homecoming $(this).children('a').text() == txt; }).appendto($nav);/* append list item matches array element value*/ });

demo

jquery sorting navigation