我怎样才能使用jQuery按字母顺序sorting列表？
我在这里有一点点深刻，我希望这实际上是可能的。
我想能够调用一个函数，将按字母顺序sorting列表中的所有项目。
我一直在寻找通过jQuery UI进行sorting，但似乎并不是这样。 有什么想法吗？
你不需要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”对无序列表进行sorting。
或者你可以使用像TinySort这样的插件。 https://github.com/Sjeiti/TinySort
$(".list li").sort(asc_sort).appendTo('.list'); //$("#debug").text("Output:"); // accending sort function asc_sort(a, b){ return ($(b).text()) < ($(a).text()) ? 1 : -1; } // decending sort function dec_sort(a, b){ return ($(b).text()) > ($(a).text()) ? 1 : -1; }
现场演示： http : //jsbin.com/eculis/876/edit
为了使这项工作适用于包括Chrome在内的所有浏览器，您需要使sort（）的callback函数返回-1,0或1。
function sortUL(selector) { $(selector).children("li").sort(function(a, b) { var upA = $(a).text().toUpperCase(); var upB = $(b).text().toUpperCase(); return (upA < upB) ? -1 : (upA > upB) ? 1 : 0; }).appendTo(selector); } sortUL("ul.mylist");
如果你正在使用jQuery，你可以这样做：
$(function() { var $list = $("#list"); $list.children().detach().sort(function(a, b) { return $(a).text().localeCompare($(b).text()); }).appendTo($list); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul id="list"> <li>delta</li> <li>cat</li> <li>alpha</li> <li>cat</li> <li>beta</li> <li>gamma</li> <li>gamma</li> <li>alpha</li> <li>cat</li> <li>delta</li> <li>bat</li> <li>cat</li> </ul>
@ SolutionYogi的答案就像一个魅力，但似乎使用$ .each比直接附加listitems更简单，更高效。
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);
小提琴
我已经使用了TinySort一段时间，它是轻快的。 它用来成为一个jQuery插件，但现在它是纯JS的。
我自己也想这样做，对于提供的任何答案，我都不满意，因为我相信他们是二次的，我需要在长达数百个项目的列表上做这个。
我结束了jQuery的扩展，我的解决scheme使用 jQuery，但可以很容易地修改，以使用直的JavaScript。
我只访问每个项目两次，并进行一次linearithmicsorting，所以我认为，这应该工作在大型数据集上快很多，虽然我自由地承认我可能会被误认为：
sortList: function() { if (!this.is("ul") || !this.length) return else { var getData = function(ul) { var lis = ul.find('li'), liData = { liTexts : [] }; for(var i = 0; i<lis.length; i++){ var key = $(lis[i]).text().trim().toLowerCase().replace(/\s/g, ""), attrs = lis[i].attributes; liData[key] = {}, liData[key]['attrs'] = {}, liData[key]['html'] = $(lis[i]).html(); liData.liTexts.push(key); for (var j = 0; j < attrs.length; j++) { liData[key]['attrs'][attrs[j].nodeName] = attrs[j].nodeValue; } } return liData; }, processData = function (obj){ var sortedTexts = obj.liTexts.sort(), htmlStr = ''; for(var i = 0; i < sortedTexts.length; i++){ var attrsStr = '', attributes = obj[sortedTexts[i]].attrs; for(attr in attributes){ var str = attr + "=\'" + attributes[attr] + "\' "; attrsStr += str; } htmlStr += "<li "+ attrsStr + ">" + obj[sortedTexts[i]].html+"</li>"; } return htmlStr; }; this.html(processData(getData(this))); } }
把列表放在一个数组中，使用JavaScript的.sort() ，这是默认的字母，然后将数组转换回列表。
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")
JSFiddle演示https://jsfiddle.net/97oo61nw/
在这里，我们将ul元素中的所有li元素的值与特定的id （我们提供的函数参数）一起推送到数组arr ，并使用sort（）方法对其进行sorting 。 在对数组arr进行sorting后，我们使用forEach（）方法循环这个数组，然后用sorting的内容replace所有li元素的文本内容
