将列表放入一个数组中，使用JavaScript的.sort()，它默认是按字母顺序排列的，然后将数组转换回列表。

http://www.w3schools.com/jsref/jsref_sort.asp

HTML

<ul id="list">
    <li>alpha</li>
    <li>gamma</li>
    <li>beta</li>
</ul>

JavaScript

function sort(ul) {
    var ul = document.getElementById(ul)
    var liArr = ul.children
    var arr = new Array()
    for (var i = 0; i < liArr.length; i++) {
        arr.push(liArr[i].textContent)
    }
    arr.sort()
    arr.forEach(function(content, index) {
        liArr[index].textContent = content
    })
}

sort("list")

j挑战者演示https://j挑战者le.net970061nw/

在这里，我们将ul中li元素的所有值推入特定的id(我们作为函数参数提供)到数组arr中，并使用sort()方法对其排序，该方法默认按字母顺序排序。数组arr排序后，我们使用forEach()方法循环该数组，并将所有li元素的文本内容替换为排序内容

你不需要jQuery来做这个…

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string")
    ul = document.getElementById(ul);

  // Idiot-proof, remove if you want
  if(!ul) {
    alert("The UL object is null!");
    return;
  }

  // Get the list items and setup an array for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  // Populate the array
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Sort it
  vals.sort();

  // Sometimes you gotta DESC
  if(sortDescending)
    vals.reverse();

  // Change the list on the page
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

易于使用…

sortUnorderedList("ID_OF_LIST");

现场演示→

就像这样:

var mylist = $('#myUL');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

来自本页:http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

以上代码将使用id 'myUL'对无序列表进行排序。

或者你也可以使用TinySort这样的插件。https://github.com/Sjeiti/TinySort

改进基于Jeetendra Chauhan的回答

$('ul.menu').each(function(){
    $(this).children('li').sort((a,b)=>a.innerText.localeCompare(b.innerText)).appendTo(this);
});

为什么我认为这是一个进步:

using each to support running on more than one ul using children('li') instead of ('ul li') is important because we only want to process direct children and not descendants using the arrow function (a,b)=> just looks better (IE not supported) using vanilla innerText instead of $(a).text() for speed improvement using vanilla localeCompare improves speed in case of equal elements (rare in real life usage) using appendTo(this) instead of using another selector will make sure that even if the selector catches more than one ul still nothing breaks

@SolutionYogi的答案很有魅力，但似乎使用$。这两种方法都不如直接添加列表来得直接和有效:

var mylist = $('#list');
var listitems = mylist.children('li').get();

listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})

mylist.empty().append(listitems);

小提琴