Javascript 对数据属性进行排序

我编写了一个函数，它应该按照price high->low对

数据成本

数据属性进行排序。当

数据成本

都有相同数量的数字时，它可以正常工作，但是如果我添加具有不同数量数字的

数据成本

s，该功能将不再工作。我希望保持与现在相同的结构，但由于我对JS还比较陌生，我对更多可重用的解决方案持开放态度。提前感谢您的帮助

小提琴：

<a id="sort" href="#">Price High to Low</a>

<ul class="returned-list">
    <li data-cost="101">101</li>
    <li data-cost="103">103</li>
    <li data-cost="106">106</li>
    <li data-cost="42">42</li>
</ul>

var sortHL = function () {
    function compare(a,b) {
        if (a.cost > b.cost)
            return -1;
        if (a.cost < b.cost)
            return 1;
        return 0;
    }

    var items = [];
    $('.returned-list li').each(function() {
        var item = {
            cost: $(this).attr('data-cost'),
            contents: $(this)[0].outerHTML
        };
        items.push(item);
    });

    items.sort(compare);
    $('.returned-list').html('');
    for(var i=0;i<items.length;i++) {
        $('.returned-list').append(items[i].contents);
    }
};

$('#sort').on('click', function () { 
    sortHL();
});

HTML:

<a id="sort" href="#">Price High to Low</a>

<ul class="returned-list">
    <li data-cost="101">101</li>
    <li data-cost="103">103</li>
    <li data-cost="106">106</li>
    <li data-cost="42">42</li>
</ul>

var sortHL = function () {
    function compare(a,b) {
        if (a.cost > b.cost)
            return -1;
        if (a.cost < b.cost)
            return 1;
        return 0;
    }

    var items = [];
    $('.returned-list li').each(function() {
        var item = {
            cost: $(this).attr('data-cost'),
            contents: $(this)[0].outerHTML
        };
        items.push(item);
    });

    items.sort(compare);
    $('.returned-list').html('');
    for(var i=0;i<items.length;i++) {
        $('.returned-list').append(items[i].contents);
    }
};

$('#sort').on('click', function () { 
    sortHL();
});

101
103
106
42

JS:

<a id="sort" href="#">Price High to Low</a>

<ul class="returned-list">
    <li data-cost="101">101</li>
    <li data-cost="103">103</li>
    <li data-cost="106">106</li>
    <li data-cost="42">42</li>
</ul>

var sortHL = function () {
    function compare(a,b) {
        if (a.cost > b.cost)
            return -1;
        if (a.cost < b.cost)
            return 1;
        return 0;
    }

    var items = [];
    $('.returned-list li').each(function() {
        var item = {
            cost: $(this).attr('data-cost'),
            contents: $(this)[0].outerHTML
        };
        items.push(item);
    });

    items.sort(compare);
    $('.returned-list').html('');
    for(var i=0;i<items.length;i++) {
        $('.returned-list').append(items[i].contents);
    }
};

$('#sort').on('click', function () { 
    sortHL();
});

var sortHL=函数（）{
功能比较（a、b）{
如果（a.成本>b.成本）
返回-1；
如果（a.成本
cost: parseInt($(this).attr('data-cost'), 10)

在对象构造中，以便将成本作为数字而不是字符串进行比较。
您需要使用

cost: parseInt($(this).attr('data-cost'), 10)

在对象构造中，以便将成本作为数字而不是字符串进行比较。
执行转换：

cost: Number($(this).attr('data-cost')),

表演演员阵容：

cost: Number($(this).attr('data-cost')),

下面是一个较短的方法：

var sortHL = function () {
    $(".returned-list li[data-cost]").detach().sort(function(a,b){
        return Number($(a).attr('data-cost')) < Number($(b).attr('data-cost'))
    }).appendTo($(".returned-list"))
};

$('#sort').on('click', function () { 
    sortHL();
});

var sortHL=函数（）{
$（“.returned list li[data cost]”）.detach（）.sort（函数（a，b）{
返回编号（$（a）.attr（'data-cost'））
这里有一个较短的方法：

var sortHL = function () {
    $(".returned-list li[data-cost]").detach().sort(function(a,b){
        return Number($(a).attr('data-cost')) < Number($(b).attr('data-cost'))
    }).appendTo($(".returned-list"))
};

$('#sort').on('click', function () { 
    sortHL();
});

var sortHL=函数（）{
$（“.returned list li[data cost]”）.detach（）.sort（函数（a，b）{
返回编号（$（a）.attr（'data-cost'））
我觉得不试试这个很傻。很有魅力，谢谢！我觉得不试试这个很傻。很有魅力，谢谢！