¿Cómo puedo orderar una list alfabéticamente usando jQuery?

Estoy un poco fuera de mi scope aquí y espero que esto sea realmente posible.

Me gustaría poder llamar a una function que orderaría alfabéticamente todos los elementos de mi list.

He estado buscando en la interfaz de usuario de jQuery para orderar, pero parece que no es así. ¿Alguna idea?

No necesitas jQuery para hacer esto …

function sortUnordenetworkingList(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]; } 

Fácil de usar…

 sortUnordenetworkingList("ID_OF_LIST"); 

Demostración en vivo →

Algo como esto:

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

Desde esta página: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

El código anterior orderará su list desorderada con id 'myUL'.

O puede usar un complemento como 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; } 

demostración en vivo: http://jsbin.com/eculis/876/edit

Para que este trabajo funcione con todos los browseres, incluido Chrome, debe hacer que la function de callback de sort () devuelva -1,0 o 1.

ver http://inderpreetsingh.com/2010/12/01/chromes-javascript-sort-array-function-is-different-yet-proper/

 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"); 

Si está utilizando jQuery puede hacer esto:

 $(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> 

La respuesta de @ SolutionYogi funciona como un hechizo, pero parece que usar $ .each es less directo y eficiente que los elementos de list que se agregan directamente:

 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); 

Violín

He usado TinySort por un time y es ligero y rápido. Solía ​​ser un complemento jQuery, pero ahora es JS puro.

http://tinysort.sjeiti.com/

Yo estaba buscando hacerlo yo mismo, y no estaba satisfecho con ninguna de las respuestas proporcionadas simplemente porque, creo, son un time cuadrático, y necesito hacer esto en lists de cientos de artículos de largo.

Terminé extendiendo jquery, y mi solución usa jquery, pero podría modificarse fácilmente para usar Javascript directamente.

Solo accedo a cada ítem dos veces, y realizo un tipo linearitmico, así que creo que esto debería funcionar mucho más rápido en grandes sets de datos, aunque confieso libremente que podría ser confundido allí:

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

Coloque la list en una matriz, use el .sort() de JavaScript .sort() , que por order alfabético por defecto, luego convierta la matriz a una list.

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") 

Demostración JSFiddle https://jsfiddle.net/97oo61nw/

Aquí estamos insertando todos los valores de los elementos li dentro de ul con id específico (que proporcionamos como argumento de function) en array arr y lo orderamos usando el método sort () que está orderado alfabéticamente de forma pnetworkingeterminada. Una vez que se haya orderado la matriz array, colocamos esta matriz en bucle usando el método forEach () y simplemente reemplazamos el contenido de text de todos los elementos li con el contenido orderado