jQuery按数据属性排序

我有一系列的div，我想根据价格、评级或alpha进行排序。alpha不是一个问题，但是为了实现数字排序，我尝试使用一个数据属性

示例代码如下：

$(".btnSortP").click(function() {
    console.log("Clicked");
    var divList = $(".listing");
    divList.sort(function(a, b){
    return $(a).data("price") - $(b).data("price")
});

$("#container").html(divList);

我无法让函数以正确的顺序返回父div。我制作了一把小提琴来演示这个问题

---

基于html的最佳方法是：

$(document).ready(function(){

    $(".btnSortP").click(function() {

        var divList = $(".listing");

        divList.sort(function(a, b){

            var result = parseFloat($(a).find('[data-price]').data('price'))- parseFloat($(b).find('[data-price]').data('price'));

            return result;
        });

        $("#container").html(divList);
    });
});

您可以很好地放置属性数据。span class=“price”中的数据price='499.99'必须为bi

---

感谢@Mohammad，我可以看到它是如何工作的，但是我使用data属性的原因是为了避免将数据重新添加进去。我不能仅仅根据转换成数字的数据值进行排序吗？@user2739763我更正了它。。我这么做是因为你所有的

.price

div都没有

数据price

attr。很抱歉，我后来注意到了这个错误。谢谢你的帮助！

  $(document).ready(function () {

    $(".btnSortP").click(function () {

        var divList = $(".listing");

        divList.sort(function (a, b) {

            var priceA=$(a).find('.price').data("price");
            var priceB=$(b).find('.price').data("price");
            //convert string to float
            priceA=parseFloat(priceA);
            priceB=parseFloat(priceB);

            return priceA > priceB
        });
        $("#container").html(divList);
    });
});