Как отсортировать список по алфавиту на JavaScript?

Вопрос

Задача: есть некий список (ul), и в нём есть ячейки (li). Необходимо отсортировать их в алфавитном порядке по значению содержимого этих ячеек. Естественно, значение может содержать не только английские, но и кириллические символы. Какое решение предложите?


Ответ №1

Вот решение с использованием jQuery:

var mylist = $('#my-ul');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   var compA = $(a).text().toUpperCase();
   var compB = $(b).text().toUpperCase();
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

Без jQuery код будет тоже очень коротким, можно ещё выкинуть возможность сортировки в обратном порядке, если она не требуется:

function sortUnorderedList(ul, sortDescending) {
    if(typeof ul == "string")
        ul = document.getElementById(ul);
    // Получаем ячейки списка в массив
    var lis = ul.getElementsByTagName("LI");
    var vals = [];
    for(var i = 0, l = lis.length; i < l; i++)
        vals.push(lis[i].innerHTML);
    // Сортируем их
    vals.sort();
    // Если в обрятном порядке, то оборачиваем
    if(sortDescending)
        vals.reverse();
    // Меняем содержимое элементов списка
    for(i = 0, l = lis.length; i < l; i++)
        lis[i].innerHTML = vals[i];
}

Использование:

sortUnorderedList("list-id"); // Сортируем список с id="list-id" в прямом порядке
sortUnorderedList("list-id", true); // В обратном порядке

4 комментария

  • Сергей:

    Большое спасибо за скрипт. Искал в гугле такое решение но находил только многофункциональные и следовательно тяжеловесные решения в основном на jquery UI. А тут всего пара строчек js кода очень удобно.

  • DeweyRaf:

    If you have a desire to learn how to earn from $ 500 per day and work only for yourself, then write to us at email: admin@makemoneyonline.universalxyzdom.xyz

  • AntonioUnalk:

    Открылся новый магазин все по 50 рублей, например определенный товар стоит 5000 рублей или 7000 рублей то у нас вы можете найти его всего за 50 рублей: http://shop-50-rubley.xyz
    магазин ежедневно пополняется, к концу недели будет очень богатый ассортимент.

  • WilliamCramy:

    How to quickly lose weight in 15 days:
    https://sites.google.com/site/weightlossluxury/how-to-lose-weight-40-fast-easy-tips

    Interesting tags:
    drink 2 gallons of water a day weight loss
    lose weight gym workout routine
    perez hilton weight loss plastic surgery
    diabetes medication causes weight loss
    before and after weight loss in teens
    weight loss programs in the woodlands texas
    metabolic weight loss center valdosta ga
    herbs to promote weight loss
    sleeve weight loss surgery canada

Добавить комментарий


(обязательно)