Wie kann ich eine Liste mit jQuery alphabetisch sortieren?

Ich bin hier etwas überfordert und hoffe, dass dies tatsächlich möglich ist.

Ich möchte eine Funktion aufrufen können, die alle Elemente in meiner Liste alphabetisch sortiert.

Ich habe die jQuery-Benutzeroberfläche nach Sortierung durchsucht, aber das scheint es nicht zu sein. Irgendwelche Gedanken?

Sie benötigen dazu nicht 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];
}

Einfach zu verwenden...

sortUnorderedList("ID_OF_LIST");

Live-Demo →

Etwas wie das:

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

Von dieser Seite: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Der obige Code sortiert Ihre ungeordnete Liste mit der ID 'myUL'.

ODER Sie können ein Plugin wie TinySort verwenden. 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

Damit dies mit allen Browsern einschließlich Chrome funktioniert, muss die Rückruffunktion von sort () -1,0 oder 1 zurückgeben.

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

Wenn Sie jQuery verwenden, können Sie dies tun:

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

Beachten Sie, dass die Rückgabe von 1 und -1 (oder 0 und 1) von der Vergleichsfunktion absolut falsch ist .

@ SolutionYogis Antwort funktioniert wie ein Zauber, aber es scheint, dass die Verwendung von $ .each weniger einfach und effizient ist als das direkte Anhängen von Listenelementen:

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

Geige

Verbesserung basierend auf Jeetendra Chauhans Antwort

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

warum ich es für eine Verbesserung halte:

1. Verwenden each, um das Laufen auf mehr als einer Ul zu unterstützen

2. Verwenden von children('li')anstelle von ('ul li')ist wichtig, da wir nur direkte Kinder und keine Nachkommen verarbeiten möchten

3. Die Verwendung der Pfeilfunktion (a,b)=>sieht einfach besser aus (IE wird nicht unterstützt).

4. Verwenden Sie Vanille innerTextanstelle $(a).text()zur Geschwindigkeitsverbesserung

5. Die Verwendung von Vanille localeCompareverbessert die Geschwindigkeit bei gleichen Elementen (selten im realen Gebrauch).

6. Verwendung appendTo(this)stattdessen einen anderen Wähler der Verwendung dafür sorgen, dass auch wenn die Wähler Fänge mehr als eine ul noch nichts bricht

Ich habe versucht, dies selbst zu tun, und ich war mit keiner der Antworten zufrieden, nur weil ich glaube, dass es sich um eine quadratische Zeit handelt, und ich muss dies auf Listen mit Hunderten von Elementen tun.

Am Ende habe ich jquery erweitert, und meine Lösung verwendet jquery, könnte aber leicht geändert werden, um direktes Javascript zu verwenden.

Ich greife nur zweimal auf jedes Element zu und führe eine linearithmische Sortierung durch. Ich denke, dies sollte sich bei großen Datenmengen als viel schneller herausstellen, obwohl ich frei gestehe, dass ich mich dort irren könnte:

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

Fügen Sie die Liste in ein Array ein, verwenden Sie JavaScript .sort(), das standardmäßig alphabetisch ist, und konvertieren Sie das Array zurück in eine Liste.

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

JSFiddle Demo https://jsfiddle.net/97oo61nw/

Hier werden alle Werte von liElementen ulmit einem bestimmten Element id(das wir als Funktionsargument angegeben haben) in das Array verschoben arrund mit der Methode sort () sortiert, die standardmäßig alphabetisch sortiert ist. Nachdem das Array arrsortiert wurde, werden wir dieses Array mit der forEach () -Methode durchlaufen und ersetzen einfach den Textinhalt aller liElemente durch sortierten Inhalt