时间戳

首页 > 解决方案 > 基于“data-”属性的 JQuery 对 div 进行排序

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

问题描述

我正在尝试根据它的data-enter属性使用 jquery 对 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：

我正在尝试排序的 Divs。

此外，这是控制台输出：

控制台输出

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

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

网页

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

标签： javascripthtmljquery

解决方案

您的排序函数必须返回 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);

推荐阅读