javascript - alfabeticamente - ordenar elementos jquery
¿Cómo puedo ordenar una lista alfabéticamente usando jQuery? (9)
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 ordenará su lista desordenada con el id ''myUL''.
O puedes usar un plugin como TinySort. https://github.com/Sjeiti/TinySort
Estoy un poco fuera de mi alcance aquí y espero que esto sea realmente posible.
Me gustaría poder llamar a una función que ordenaría alfabéticamente todos los elementos de mi lista.
He estado buscando a través de la interfaz de usuario de jQuery para ordenar, pero no parece ser eso. ¿Alguna idea?
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 de JSFiddle https://jsfiddle.net/97oo61nw/
Aquí estamos empujando todos los valores de los elementos li dentro de ul con un id específico (que proporcionamos como argumento de función) al arreglo arr y lo ordenamos usando el método sort() que está ordenado alfabéticamente por defecto Después de ordenar la matriz arr hacemos un bucle en esta matriz usando el método forEach() y simplemente reemplazamos el contenido de texto de todos los elementos li con contenido ordenado
Intenté hacer esto yo mismo, y no estaba satisfecho con ninguna de las respuestas proporcionadas simplemente porque creo que son tiempos cuadráticos, y debo hacer esto en las listas de cientos de elementos.
Terminé extendiendo jquery, y mi solución usa jquery, pero podría modificarse fácilmente para usar javascript directo.
Solo accedo a cada elemento dos veces, y realizo una ordenación linealítmica, así que creo que esto debería ser mucho más rápido en grandes conjuntos de datos, aunque confieso libremente que puedo equivocarme 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)));
}
}
La respuesta de @ SolutionYogi funciona a la perfección, pero parece que usar $. Cada uno es menos sencillo y eficiente que la inclusión de listas 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);
No necesitas jQuery para hacer esto ...
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];
}
Fácil de usar...
sortUnorderedList("ID_OF_LIST");
Para que este trabajo funcione con todos los navegadores, incluido Chrome, debe hacer que la función de devolución de llamada de sort () devuelva -1,0 o 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");
Ponga la lista en una matriz, use .sort() JavaScript, que es alfabético por defecto, y luego vuelva a convertir la matriz en una lista.
Si estás usando jQuery puedes 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>
Tenga en cuenta que devolver 1 y -1 (o 0 y 1) desde la función de comparación es absolutamente incorrecto .
$(".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