it-swarm.com.de

Wie kann ich eine Liste mit jQuery alphabetisch sortieren?

Ich bin hier ein bisschen aus meiner Tiefe und ich 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 Sortierungen durchsucht, aber das scheint es nicht zu sein. Irgendwelche Gedanken?

226
dougoftheabaci

Sie brauchen nicht, um dies zu tun ...

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 →

102
Josh Stodola

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

318
SolutionYogi
$(".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

85

Damit dies mit allen Browsern, einschließlich Chrome, funktioniert, müssen Sie die Rückruffunktion von sort () auf -1,0 oder 1 setzen. 

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

Wenn Sie jQuery verwenden, können Sie Folgendes 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 .

27
Salman A

Die Antwort von @ SolutionYogi wirkt 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);

Fiddle

6
Buzut

Ich habe versucht, dies selbst zu tun, und ich war mit keiner der Antworten zufrieden, nur weil ich glaube, dass sie quadratisch sind und ich dies auf Listen mit hunderten von Artikeln tun muss.

Ich endete damit, jquery zu erweitern, und meine Lösung verwendet jquery, konnte aber leicht modifiziert werden, um Javascript zu verwenden.

Ich greife nur zweimal auf jedes Element zu und führe eine linearithmische Sortierung aus. Ich denke, dies sollte sich bei großen Datensätzen als viel schneller erweisen, auch wenn ich zugeben muss, dass ich mich darin 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)));
    }
}
0
Quirkles

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

http://www.w3schools.com/jsref/jsref_sort.asp

0
Elon Zito

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 sind wir alle Werte von li-Elementen in ul mit spezifischer id (die wir als Funktionsargument bereitgestellt haben) in Array arr zu schieben und mit der sort () - Methode zu sortieren, die standardmäßig alphabetisch sortiert ist. Nachdem Array arr sortiert ist, wird dieses Array mit der Methode forEach () in einer Schleife dargestellt. Ersetzen Sie einfach den Textinhalt aller li-Elemente durch sortierten Inhalt

0
Mikhail