Сортировка DOM элементов с jQuery

Опубликовано

Очень часто может возникнуть ситуация когда необходима сортировка html элементов в DOM с помощью javascript.

Для решения данной задачи можно воспользоваться встроенной функцией sort.

Например, у нас есть вот такой неупорядоченный список.

<button class="sort-elements">Сортировать</button>

<div class="sorting">
    <ul class="elements">
        <li>Элементы</li>
        <li>Для</li>
        <li>Проверки</li>
        <li>Сортировки</li>
        <li>На</li>
        <li>jQuery</li>
    </ul>
</div>

Для его сортировки можно использовать следующий метод

$('.sort-elements').click(function(){
    var $elements = $('.elements li');
    var $target = $('.sorting ul');
    
    $elements.sort(function (a, b) {
        var an = $(a).text(),
            bn = $(b).text();
        
        if (an && bn) {
            return an.toUpperCase().localeCompare(bn.toUpperCase());
        }
        
        return 0;
    });
    
    $elements.detach().appendTo($target);
});

Или вот здесь можно посмотреть рабочий пример сортировки.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on VK
  • alexanderkhmelnitskiy

    спасибо, помог 🙂

  • Спасибо автору за скрипт! Единственное решение которое за работало. Надо было сделать сортировку по имени и по дате.

    Автор, напиши код с сортировкой по возрастанию и убыванию с учетом различных полей: название, дата добавления, дата редактирования и пр. Получишь еще ряд благодарностей 😉