Jak mogę posortować listę alfabetycznie za pomocą jQuery?

Jestem trochę z głębi i mam nadzieję, że to rzeczywiście możliwe.

Chciałbym móc wywołać funkcję, która sortowałaby wszystkie elementy na mojej liście alfabetycznie.

Przeglądałem interfejs użytkownika jQuery pod kątem sortowania, ale tak nie jest. jakieś pomysły?

Zdajesz nie potrzeba jQuery to zrobić ...

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

Łatwy w użyciu...

sortUnorderedList("ID_OF_LIST");

Demo na żywo →

Coś takiego:

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

Z tej strony: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Powyższy kod posortuje Twoją nieuporządkowaną listę o identyfikatorze „myUL”.

LUB możesz użyć wtyczki takiej jak 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;    
}

demo na żywo: http://jsbin.com/eculis/876/edit

Aby działało to we wszystkich przeglądarkach, w tym w Chrome, musisz ustawić funkcję zwrotną sort () zwracającą -1,0 lub 1.

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

Jeśli używasz jQuery, możesz to zrobić:

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

Zauważ, że zwracanie 1 i -1 (lub 0 i 1) z funkcji porównania jest absolutnie niepoprawne .

@ Rozwiązanie Odpowiedź Yogi działa jak urok, ale wydaje się, że użycie $ .each jest mniej proste i wydajne niż bezpośrednie dołączanie listitemów:

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

Skrzypce

Poprawa na podstawie Jeetendra Chauhan odpowiedź „s

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

dlaczego uważam to za ulepszenie:

1. za pomocą eachdo obsługi działającej na więcej niż jednej ul

2. używanie children('li')zamiast ('ul li')jest ważne, ponieważ chcemy przetwarzać tylko bezpośrednie dzieci, a nie potomków

3. użycie funkcji strzałki (a,b)=>wygląda po prostu lepiej (IE nie jest obsługiwane)

4. używając wanilii innerTextzamiast $(a).text()przyspieszenia

5. używanie wanilii localeComparepoprawia prędkość w przypadku równych elementów (rzadkie w prawdziwym życiu)

6. użycie appendTo(this)zamiast użycia innego selektora sprawi, że nawet jeśli selektor złapie więcej niż jedną ul, nadal nic się nie zepsuje

Chciałem to zrobić sam i nie byłem usatysfakcjonowany żadną z udzielonych odpowiedzi po prostu dlatego, że, jak sądzę, są to czasy kwadratowe i muszę to zrobić na listach o długości setek pozycji.

Skończyło się na rozszerzeniu jquery, a moje rozwiązanie używa jquery, ale można je łatwo zmodyfikować, aby używało prostego javascript.

Uzyskuję dostęp do każdego elementu tylko dwa razy i wykonuję jeden sort liniowy, więc myślę, że powinno to działać znacznie szybciej w przypadku dużych zestawów danych, choć swobodnie przyznaję, że mogłem się tutaj pomylić:

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

Umieść listę w tablicy, użyj JavaScript .sort(), który jest domyślnie alfabetyczny, a następnie przekonwertuj tablicę z powrotem na 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")

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

Tutaj wypychamy wszystkie wartości lielementów za ulpomocą określonych id(które podano jako argument funkcji) do tablicy arri sortujemy za pomocą metody sort () , która jest domyślnie sortowana alfabetycznie. Po arrposortowaniu tablicy zapętlamy tę tablicę za pomocą metody forEach () i po prostu zastępujemy zawartość tekstową wszystkich lielementów posortowaną treścią