javascript - 按属性和链接文本对 div 中包含的链接进行排序

Question

我有一个包含许多链接的 div。

每个链接都有一个“data-direction”属性，包含整数 1、2 或 3。

我想向按钮添加一个点击事件，以对 div 中的链接进行排序，首先按“数据方向”属性，然后按链接文本。

例如，如果我从以下内容开始:

<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

感谢 Rory McCrossan 的上述指导，以下内容似乎适用于我的用例。

这会设置一个名为 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>

如果有任何改进建议，我将不胜感激。