Сортировать ссылки, содержащиеся в div, по атрибуту и ​​по тексту ссылки

Question

У меня есть div, который содержит несколько ссылок.

Каждая ссылка имеет атрибут data-direction, содержащий целое число 1, 2 или 3.

Я хочудобавить событие нажатия кнопки, чтобы отсортировать ссылки в div, сначала по атрибуту «data-direction», а затем по тексту ссылки.

например, если я начну со следующего:

<div id="link_list">
   <a href="#" data-direction="2">Allergy</a>
   <a href="#" data-direction="1">Walking</a>
   <a href="#" data-direction="3">Belltower</a>
   <a href="#" data-direction="1">Apple</a>
   <a href="#" data-direction="2">Affable</a>
</div>

... моя цель сортировать по:

<div id="link_list">
   <a href="#" data-direction="1">Apple</a>
   <a href="#" data-direction="1">Walking</a>
   <a href="#" data-direction="2">Allergy</a>
   <a href="#" data-direction="2">Affable</a>
   <a href="#" data-direction="3">Belltower</a>
</div>

Answer 1

Благодаря руководству Рори МакКроссана, приведенному выше, мне кажется, что следующее подходит для моего варианта использования.

Устанавливает переменную с именем link_sort_direction, которая используется для записи состояния сортировки рассматриваемого div.

<script type="application/javascript">
    var link_sorted_direction = true;
    $('#sort_links').click(function (e) {
        var elements = $('#div_links').children('a');
        if (link_sorted_direction === true) {
            link_sorted_direction = false;
            elements.sort(function (a, b) {
                var nameA = $(a).text();
                var nameB = $(b).text();
                return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0;
            })
        } else {
            link_sorted_direction = true;
            elements.sort(function (a, b) {
                var contentA = parseInt($(a).attr('data-direction'));
                var contentB = parseInt($(b).attr('data-direction'));
                if (contentA === contentB) {
                    var nameA = $(a).text();
                    var nameB = $(b).text();
                    return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0;
                } else {
                    return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
                }
            });
        }
        $('#div_links').append(elements);
        e.preventDefault();
    })
</script>

Буду признателен за любые предложения по улучшению.