HTML导航上的自定义jQuery排序。如何根据标题对元素排序？

我有一个自定义导航构建，我想应用一个特定的排序顺序的基础上，他们的标题。我该如何对菜单进行排序，以代替：

场地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>

小提琴：

---

这里有一种方法需要基于文本的数组。它删除所有元素并按数组定义的顺序追加它们

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*/
});

---

为什么要在客户端使用它？您使用的是asp.net，为什么不在服务器端使用呢？太好了！jQuery太漂亮了