HTML 탐색에서 사용자 정의 jQuery 정렬. 제목에 따라 요소를 정렬하는 방법은 무엇입니까?

Question

제목을 기반으로 특정 정렬 순서를 적용하려는 사용자 정의 탐색 기능이 있습니다. 대신 그래서 나는이 메뉴를 정렬 가겠어요 방법 :

사이트 1 사이트 2, 사이트 3, 사이트 4

우리는 사이트 3, 사이트 2, 사이트 4, 사이트 수 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> 

바이올린 :

http://jsfiddle.net/Colbs/UyDLL/

Answer 1

여기에 텍스트를 기반으로 배열을 필요로 하나의 방법입니다. 그것은 모든 요소를 ​​제거하고 그들을

var navOrder=['Site 3','Site 2','Site 4','Site 1']; 
var $nav=$('.navSites'); 
/* detach the list items */ 
var $items=$nav.children().detach(); 
/* loop over navOrder array */ 
$.each(navOrder, function(_, txt){ 
    $items.filter(function(){ 
     return $(this).children('a').text() == txt; 
    }).appendTo($nav);/* append list item that matches array element value*/ 
}); 

DEMO