Comment puis-je trier une liste Par Ordre alphabétique en utilisant jQuery?
je suis un peu hors de ma profondeur ici et j'espère que cela est possible.
j'aimerais pouvoir appeler une fonction qui classerait tous les articles de ma liste Par Ordre alphabétique.
j'ai cherché dans l'interface de jQuery pour le tri, mais ça ne semble pas être ça. Toutes les pensées?
9 réponses
Vous ne pas besoin de jQuery pour ce faire...
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];
}
facile à utiliser...
sortUnorderedList("ID_OF_LIST");
quelque chose comme ça:
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); });
de cette page: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery /
le code ci-dessus va trier votre liste non classée avec l'id 'myUL'.
ou vous pouvez utiliser un plugin comme 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;
}
live demo: http://jsbin.com/eculis/876/edit
pour que ce travail fonctionne avec tous les navigateurs, y compris Chrome, vous devez utiliser la fonction de rappel de sort() return -1,0 ou 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");
si vous utilisez jQuery vous pouvez le faire:
$(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>
noter que retourner 1 et -1 (ou 0 et 1) de la fonction de comparaison est absolument faux .
la réponse de @SolutionYogi fonctionne comme un charme, mais il semble que l'utilisation de $.chacun est moins simple et efficace que les listes annexées directement:
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);
je cherchais à le faire moi-même, et je n'étais pas satisfait de l'une des réponses fournies simplement parce que, je crois, ils sont Temps quadratique, et je dois le faire sur des listes de centaines d'articles long.
j'ai fini par étendre jquery, et ma solution utilise jquery, mais pourrait facilement être modifié pour utiliser javascript droit.
Je n'accède à chaque objet que deux fois, et j'effectue un tri linéarithmique, donc cela devrait, je pense, s'avère être beaucoup plus rapide sur les grands ensembles de données, bien que je confesse librement que je pourrais être confondu là-bas:
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)));
}
}
mettez la liste dans un tableau, utilisez .sort()
de JavaScript , qui est par défaut alphabétique, puis convertissez le tableau de nouveau à une liste.
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 Demo https://jsfiddle.net/97oo61nw /
ici nous sommes poussons toutes les valeurs de li
elements inside ul
avec spécifique id
(que nous avons fourni comme argument de fonction) au tableau arr
et le trier en utilisant sort () méthode qui est triée alphabétique par défaut. Après le tableau arr
est trié nous sommes boucle ce tableau en utilisant forEach () méthode et il suffit de remplacer le texte de tous les li
éléments avec le contenu trié