基于“data-”属性的 JQuery 对 div 进行排序答案

【问题标题】：Sorting Divs With JQuery Based On "data-" Attribute基于“data-”属性的 JQuery 对 div 进行排序
【发布时间】：2020-08-24 12:12:12
【问题描述】：

我正在尝试使用 jquery 根据它的 data-enter 属性对 div 进行排序。这是我的 JQuery：

            let result = $("#tableEls .dataDiv").sort(function (a, b) {
                console.log(+$(a).data("enter") + " < " + +$(b).data("enter"));
                return +$(a).data("enter") < +$(b).data("enter");
            }).appendTo("#tableEls");

            console.log(result);

但是，当它被调用时，它不会重新排序 div。以下是 div：

另外，这是控制台输出：

我在 StackOverflow 上尝试了许多不同的解决方案，但找不到任何适合我的解决方案。我不确定我是否做错了什么，但我看不出有什么问题。

此外，这是 HTML 页面本身的屏幕截图，其中四个 div 中的每一个都用黑色边框勾勒出来：

当点击Sort Rows按钮时，每个表中的enter单元格并将其添加为每个div的data-enter属性在从上面运行 JQuery 之前。所以在这个例子中，第一个和第二个 div 的位置应该交换。

【问题讨论】：

如果值相等，sort 函数应该返回 0，如果第一个参数大于第二个参数，则返回大于 0 的值，如果第一个参数小于第二个参数，则返回小于 0 的值第二。提供的排序函数返回一个布尔值。通常，如果参数是数字，返回 a - b 的等价物就足以对它们进行排序。

标签： javascript html jquery

【解决方案1】：

您的排序函数必须返回 N 或 -N 或 0 而不是布尔值：

let result = $("#tableEls .dataDiv").sort(function (a, b) {
            console.log(+$(a).data("enter") + " - " + +$(b).data("enter"));
            return +$(a).data("enter") - +$(b).data("enter");
        }).appendTo("#tableEls");

        console.log(result);

【讨论】：