Сортировка & lt; a & gt; внутри элемента списка по алфавиту [дубликат]

@ Ответ SolutionYogi работает как шарм, но кажется, что использование $ .each менее прямолинейно и эффективно, чем прямое добавление listitems:

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

Если вы используете jQuery, вы можете это сделать:

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

Обратите внимание, что возврат 1 и -1 (или 0 и 1) из функции сравнения абсолютно неверна .

Поместите список в массив, используйте JavaScript .sort(), который по умолчанию по алфавиту, затем преобразуйте массив обратно в список.

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/

] Здесь мы выталкиваем все значения элементов li внутри ul со специфическим id (который мы предоставили как аргумент функции) в массив arr и сортируем его с помощью метода sort () , который по умолчанию сортируется по алфавиту. После сортировки массива arr мы обрабатываем этот массив с помощью метода forEach () и просто заменяем текстовое содержимое всех элементов li на отсортированный контент

Чтобы эта работа работала со всеми браузерами, включая Chrome, вам нужно сделать функцию обратного вызова sort () return -1,0 или 1.

см. 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");

Я искал, чтобы сделать это сам, и я не был удовлетворен ни одним из ответов, предоставленных просто потому, что, я считаю, они являются квадратичным временем, и мне нужно сделать это в списках сотен предметов долго.

Я закончил расширять jquery, и мое решение использует jQuery , но может быть легко изменено, чтобы использовать прямой javascript.

Я получаю доступ только к каждому элементу дважды и выполняю одно линейное вычисление , поэтому это должно, я думаю, работать намного быстрее на больших наборах данных, хотя я свободно признаюсь, что могу ошибаться там:

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

Что-то вроде этого:

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

С этой страницы: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Выше кода сортирует ваш неупорядоченный список с id 'myUL'.

ИЛИ вы можете использовать такой плагин, как TinySort. https://github.com/Sjeiti/TinySort