jQuery sorting by data-attribute

Question

I have a series of divs which I would like to sort based on price, rating or alpha. The alpha is not an issue but to achieve the numerical sorting I am trying to use a data attribute.

Sample code below:

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

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

I can't get the function to return the parent divs in the correct order. I've created a fiddle to try to demonstrate the problem.

Demo

Answer 1

base on your html best way is:

$(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/

you're well placed attribute data. data-price='499.99' must bi in 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);
    });
});