排序無序列表使用Javascript

Question

我一直在尋找的計算器線程：

How may I sort a list alphabetically using jQuery?

但我的情況，我有層次結構：基於這種設置

<ul><li><a href="http://www.google.com.au">NAME_TO_SORT_ON</a></li></ul> 

，我如何從這裏提到的線程修改解決方案來迎合我的場景，該場景有一個標籤，因爲我想對NAME_TO_SORT_ON中的所有名稱進行排序？

謝謝。

Answer 1

我建議使用基於jQuery的解決方案，因爲一旦開始進入多個DOM級別（例如基於更深層次的元素內容對一個級別的同級），簡單的排序機制就會崩潰。這是一個極其粗糙的解決方案 - 基本上吹掉了現有的HTML，並用原始文本模式替換爲其他HTML。我們可以通過實際洗牌周圍的DOM元素做的更好：

function sort(list, key) { 
    $($(list).get().reverse()).each(function(outer) { 
     var sorting = this; 
     $($(list).get().reverse()).each(function(inner) { 
      if($(key, this).text().localeCompare($(key, sorting).text()) > 0) { 
       this.parentNode.insertBefore(sorting.parentNode.removeChild(sorting), this); 
      } 
     }); 
    }); 
} 

要使用它，我們傳遞的選擇到列表中，並用它來查找我們要排序的關鍵選擇：

<ul class="toBeSorted"> 
    <li><a href="...">sort me</a></li> 
</ul> 

<script type="text/javascript"> 
    sort('ul.toBeSorted>li', 'a'); 

    //we want to sort the <li>'s in ul.toBeSorted; 
    //and we want to use the text of the first and only <a> 
    //in each item as the sort key 
</script>