javascript - 对数据属性进行排序

Question

我编写了一个函数，该函数应该按价格高 -> 低对 data-cost 数据属性进行排序。当data-cost都具有相同数量的数字时，它工作正常，但如果我添加具有不同数量数字的data-cost，该函数将不再起作用。我想保持现在的结构，但由于我对 JS 还比较陌生，所以我愿意接受更多可重用的解决方案。预先感谢您的帮助。

fiddle :

http://jsfiddle.net/dn6mja0t/

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>

JS:

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();
});

Answer 1

您将想要使用

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

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