按属性对Div进行排序-asc或desc

Sort Div by attribute - asc or desc

本文关键字：排序 -asc desc 属性 Div      更新时间：2023-09-26

我编写了按价格属性对div进行排序的代码。但不会正确工作。谁能帮忙？所以你可以在代码jsfiddle 中看到

Js:

    $(".link-sort-list").on("click",function(e){
    var $list = $('#sort-list');
    var $productList = $('div.product-box',$list);
    $productList.sort(function(a, b){
        var keyA = $(a).attr("price");
        var keyB = $(b).attr("price");
        if($(this).hasClass('asc')){
            console.log("asc");
            return (parseInt(keyA) > parseInt(keyB)) ? 1 : 0;
        } else {
            console.log("desc");
            return (parseInt(keyA) < parseInt(keyB)) ? 1 : 0;
        }
    });
    $.each($productList, function(index, row){
        $list.append(row);
    });
    e.preventDefault();
});

https://jsfiddle.net/danvim/2xh4LLgr/3/

您需要记住$this在不同功能范围中的变化。

这样做可以设置目标：

var $this = $(this)

更新代码：

$(".link-sort-list").on("click",function(e){
    var $this = $(this);  //<--
    var $list = $('#sort-list');
    var $productList = $('div.product-box',$list);
    $productList.sort(function(a, b){
        var keyA = $(a).attr("price");
        var keyB = $(b).attr("price");
        if($this.hasClass('asc')){ //<--
            console.log("asc");
            return (parseInt(keyA) > parseInt(keyB)) ? 1 : 0;
        } else {
            console.log("desc");
            return (parseInt(keyA) < parseInt(keyB)) ? 1 : 0;
        }
    });
    $.each($productList, function(index, row){
        $list.append(row);
    });
    e.preventDefault();
});

最终解决方案

但我建议将$this的检查置于sort方法之外。此外，如果只返回布尔值即可，则不需要简写。

所以我会简化如下：https://jsfiddle.net/danvim/2xh4LLgr/5/

这将运行得更快，因为对.asc的检查只发生一次，而您的原始函数将对要比较的每个项目检查一次。

$(".link-sort-list").on("click",function(e){
    var $this = $(this);
    var $list = $('#sort-list');
    var $productList = $('div.product-box',$list);
    var order = $this.hasClass('asc');
    console.log(order);
    $productList.sort(function(a, b){
        var keyA = $(a).attr("price");
        var keyB = $(b).attr("price");
            return order ? (parseInt(keyA) > parseInt(keyB)) : (parseInt(keyA) < parseInt(keyB));
    });
    $.each($productList, function(index, row){
        $list.append(row);
    });
    e.preventDefault();
});

在Daniel的回答中，使用减法（-）而不是逻辑比较（<，>）。

sort(compare)中的"compare"函数必须具有两个参数a和b。compare函数的返回值需要返回基于以下两个参数的值：

  1. 如果a大于b，则返回大于0
  2. 如果a等于b，则返回0
  3. 如果a小于b，则返回小于0

有关详细信息，请参阅答案"排序函数如何在JavaScript中工作"，以一种很好的方式进行了解释。

$(".link-sort-list").on("click",function(e){
    var $this = $(this);
    var $list = $('#sort-list');
    var $productList = $('div.product-box',$list);
    var order = $this.hasClass('asc');
    console.log(order);
    $productList.sort(function(a, b){
        var keyA = $(a).attr("price");
        var keyB = $(b).attr("price");
        return order ? (parseInt(keyA) - parseInt(keyB)) : (parseInt(keyB) - parseInt(keyA));
    });
    $.each($productList, function(index, row){
       $list.append(row);
    });
    e.preventDefault();
});
相关文章：