时间戳

首页 > 解决方案 > 如何使用 jQuery“sortElements”插件对数字列进行排序？

javascript - 如何使用 jQuery“sortElements”插件对数字列进行排序？

问题描述

我在我的表上使用 jQuery 脚本“sortElements”对其列进行排序，但我注意到数字列中的排序不起作用。对它们进行排序的结果类似于“100 20 250 30”。我不明白如何解决这个问题。你能帮我吗？

这是“sortElements”脚本：https ://j11y.io/javascript/sorting-elements-with-jquery/

这是我在页面中使用的脚本：

var table = $('table');

$('table th')
.wrapInner('')
.each(function(){

    var th = $(this),
        thIndex = th.index(),
        inverse = false;

    th.click(function(){
        table.find('td').filter(function(){

            return $(this).index() === thIndex;

        }).sortElements(function(a, b){

            if( $.text([a]) == $.text([b]) )
                return 0;

            return $.text([a]) > $.text([b]) ?
                inverse ? -1 : 1
                : inverse ? 1 : -1;

        }, function(){

            // parentNode is the element we want to move
            return this.parentNode; 

        });

        inverse = !inverse;

    });

});

我在这个问题中找到了一个解决方案：jquery sortElement: sort by numeric value of table data

在我之前的研究中没有找到它。

标签： javascriptjquery

解决方案

您当前正在比较字符串，并且字符串是按字典顺序进行比较的，这意味着，当您将数字作为字符串进行讨论时，它们是按其数字的较大值的顺序排列的，而不是它们的实际值。本质上，对包含数字的字符串进行排序1首先会得到所有的 s，然后如果有多个以 开头的数字1，它们会查看下一个数字，依此类推。请参阅以下示例：

演示 1：

var numbers = ["2", "4", "3", "1"];
numbers.sort((a, b) => a > b);
console.log(numbers);

在这里，数字都是个位数，这意味着它们将按正确的方式排列。

演示 2：

var numbers = ["1", "4", "7", "12"];
numbers.sort((a, b) => a > b);
console.log(numbers);

在这里，我们有按正确顺序排序的个位数和1，但我们也有，放在 之后。这是因为它的第一个数字是 a ，与值相同，因此比较两个数字的第二个数字。由于大于 的第二个数字，它什么都没有，所以它排在 之后。4712111211

演示 3：

var numbers = ["10", "1", "1.3", "5", "76", "6001"];
numbers.sort((a, b) => a > b);
console.log(numbers);

在此示例中，您可以看到它1是第一个排序的，因为没有第二个数字。之后的下一项1是1.3，之后是10，这意味着小数点在字典上比0s 更“小”。

您应该做的是将您要比较的内容转换为数字，而不是像这样：

sortElements(function(a, b){
    a = parseInt(a);
    b = parseInt(b);
    if( $.text([a]) == $.text([b]) )
        return 0;
    return $.text([a]) > $.text([b]) ? inverse ? -1 : 1 : inverse ? 1 : -1;
}

希望这会有所帮助！

推荐阅读