jQuery 使用数据 id 对元素进行排序答案

【问题标题】：jQuery sort elements using data idjQuery 使用数据 id 对元素进行排序
【发布时间】：2012-11-09 12:50:02
【问题描述】：

我的 HTML 结构如下：

<div class="clist">
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=1></div>
</div>

我想将它们排序为：

<div class="clist">
    <div data-sid=1></div>
    <div data-sid=1></div>
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
</div>

我正在使用以下功能：

function sortContacts() {
    var contacts = $('div.clist'), cont = contacts.children('div');

    cont.detach().sort(function(a, b) {
        var astts = $(a).data('sid');
        var bstts = $(b).data('sid')
        return (astts > bstts) ? (astts > bstts) ? 1 : 0 : -1;
    });

    contacts.append(cont);
}

它没有按预期工作。

它在第一次运行时运行良好，但在添加新元素或更改 data-sid 属性后它不再工作。

演示：http://jsfiddle.net/f5mC9/1/

不工作？

【问题讨论】：

我想交换元素
你可以使用 tinysort (tinysort.sjeiti.com)

标签： javascript jquery html sorting

【解决方案1】：

您可以使用dataset 属性，它存储元素的所有自定义data-* 属性，它返回一个字符串，如果您想将字符串转换为可以使用parseInt 或@987654327 的数字@运算符。

$('.clist div').sort(function(a,b) {
     return a.dataset.sid > b.dataset.sid;
}).appendTo('.clist');

http://jsfiddle.net/CFYnE/

您自己的代码也可以使用：http://jsfiddle.net/f5mC9/

编辑：请注意IE10！及以下不支持.dataset属性，如果你想支持所有浏览器可以使用jQuery的.data()方法代替：

$('.clist div').sort(function(a,b) {
     return $(a).data('sid') > $(b).data('sid');
}).appendTo('.clist');

【讨论】：

像魅力一样工作！谢谢！
请注意，使用.data() 访问 HTML 数据属性会在第一次访问时创建数据属性的副本。如果您稍后更改数据属性的值，data() 仍将返回旧值。
我没有让.data() 在 IE11 或 Edge 中工作。 :(jsfiddle.net/4o771n7o
我在按字符串值对超过 10 个列表进行排序时遇到了问题。我不得不将比较更改为： return a.dataset.sid > b.dataset.sid ？ 1 : (a.dataset.sid
@trincot 这是一个很好的观点。需要注意的是，jQuery .data() 试图将data-* 属性解析为 JSON，因此字符串化的数字被 jQuery 强制转换为实数。

【解决方案2】：

$('.clist div').sort(function(a,b) {
     return parseInt(a.dataset.sid) - parseInt(b.dataset.sid);
}).appendTo('.clist');

【讨论】：

【解决方案3】：

使用 jQuery 对元素进行排序的更通用的函数：

$.fn.sortChildren = function (sortingFunction: any) {

    return this.each(function () {
        const children = $(this).children().get();
        children.sort(sortingFunction);
        $(this).append(children);
    });

};

用法：

$(".clist").sortChildren((a, b) => a.dataset.sid > b.dataset.sid ? 1 : -1);

【讨论】：

【解决方案4】：

function orderSteps() {
    var steps = $('div.steps'),
        cont = steps.children('div.step');
    cont.detach().sort(function (a, b) {
        var astts = a;
        var bstts = b;

        // stripping the id to get the position number
        var classArrA = $(astts).attr("id").split("-")[1];
        var classArrB = $(bstts).attr("id").split("-")[1];

        // checking for the greater position and order accordingly
        if (parseInt(classArrA) > parseInt(classArrB)) {
            return (0)
        }
        else {
            return (-1)
        }
    })
    steps.append(cont);
};

orderSteps()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid steps">
            <div class="row text-center border-bottom step" id="step-1">
                <span class="col-3">Item 1</span>
            </div>
            <div class="row text-center border-bottom step" id="step-2">
                <span class="col-3">Item 2</span>
            </div>
            <div class="row text-center border-bottom step" id="step-30">
                <span class="col-3">Item 3</span>
            </div>
            <div class="row text-center border-bottom step" id="step-4">
                <span class="col-3">Item 4</span>
            </div>
        </div>

【讨论】：