Question

我有一系列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的函数。我创造了一个试图证明问题的小提琴。

Demo

Answer 1

基于你的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);
    });
});

jsfiddle

Answer 2

http://jsfiddle.net/h58exqsu/9/

你的属性数据很好。 data-price ='499.99'必须为span class =“price”

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

jQuery按数据属性排序

2 个答案: