사용자 지정 jQuery를 사용하여 CMS의 항목 정렬

Question

나는 Perch라는 CMS를 사용하고 있으므로이 동적으로로드 된 목록을 다른 순서로 정렬해야합니다. CMS 측에서는 그럴 수 없어, jQuery를 사용하여 프론트 엔드에서 수행하는 방법을 찾고 싶었습니다. 것이 가능하다? 다음은 CMS에서 코드를 내보내는 방법입니다.

<ul> 
    <li><a href="archive-r.php?tag=appetizers" rel="tag">Appetizers (4)</a></li> 
    <li><a href="archive-r.php?tag=beverages" rel="tag">Beverages (2)</a></li> 
    <li><a href="archive-r.php?tag=breakfast" rel="tag">Breakfast (2)</a></li> 
    <li><a href="archive-r.php?tag=desserts" rel="tag">Desserts (4)</a></li> 
    <li><a href="archive-r.php?tag=entrees" rel="tag">Entrees (14)</a></li> 
    <li><a href="archive-r.php?tag=salads" rel="tag">Salads (14)</a></li> 
    <li><a href="archive-r.php?tag=side-dishes" rel="tag">Side Dishes (8)</a></li> 
    <li><a href="archive-r.php?tag=soups" rel="tag">Soups (1)</a></li> 
</ul> 

지금은 알파벳순입니다. 다음 순서를 반영해야합니다.

전채
스프
샐러드
앙트레
반찬
음료
디저트

어떤 도움을 주시면 더 좋구요.

Answer 1

예를 들어 http://jsfiddle.net/29CGB/3/을 참조하십시오. 정렬 할 색인이 필요합니다.이 경우 사용자 정의 정렬을 정의했습니다. 태그의 href가 고유하므로이 태그를 사용하여 정렬을 정의합니다. 다음은 코드입니다. 모든 항목을 배열에 추가하지 않았습니다. 참고 :

var sortOrder = ['appetizers', 'soups', 'salads', 'entrees', 'side-dishes']; //make sure to finish this 
var newList = $('ul li').sort(function (li1, li2) { 
    return sortOrder.indexOf($(li1).find('a').attr('href').replace('archive-r.php?tag=', '')) > sortOrder.indexOf($(li2).find('a').attr('href').replace('archive-r.php?tag=', '')) ? 1 : -1; 
}); 
$('ul').html(newList);