jQuery 按数据属性排序答案

【问题标题】：jQuery sorting by data-attributejQuery 按数据属性排序
【发布时间】：2014-11-29 16:53:34
【问题描述】：

我有一系列 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

【问题讨论】：

标签： jquery sorting custom-data-attribute

【解决方案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

【讨论】：

谢谢@Mohammad，我可以看到这是如何工作的，但我使用数据属性的原因是为了避免必须重新添加英镑。我可以不只根据转换为的数据值进行排序吗一个数字？
@user2739763 我更正了。我这样做是因为你所有的.price div 都没有data-price attr。
对不起，我注意到这个错误。感谢您的帮助！

【解决方案2】：

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

你很好地放置了属性数据。 data-price='499.99' 必须 bi 在 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);
    });
});

【讨论】：