如何通过Jquery按名称排序？答案

【问题标题】：How to sort by name through Jquery?如何通过Jquery按名称排序？
【发布时间】：2019-05-20 00:46:02
【问题描述】：

我只是使用Jquery 根据json 数据在我的html 文档中创建我的产品列表。我只是想通过单击我的标题名称来对我的产品进行排序，这将按字母顺序对我的产品进行排序。

我已经研究过如何做到这一点，但无法通过使用来自 json 的数据找到/理解如何做到这一点。

感谢任何帮助。谢谢

function drawPage() {
    $.get('/products', function (data) {
        console.log(data);
        var prod = data.products;

        for(var i=0; i<prod.length; i++){
        var el = document.createElement('P');
        el.innerHTML = prod[i].name;

            $('#app').append(el);
        }
    })
}
document.addEventListener('load', drawPage());

【问题讨论】：

为什么选择 java/python？

标签： javascript jquery sorting

【解决方案1】：

您需要重写比较函数以按产品名称对对象数组进行排序。

原型：

function drawPage() {
    $.get('/products', function (data) {
        console.log(data);
        var prods = data.products;

        //sorting by product names
        prods.sort(function(a, b){
          var x = a.name.toLowerCase();
          var y = b.name.toLowerCase();
          if (x < y) {return -1;}
          if (x > y) {return 1;}
          return 0;
        });

        for(var i=0; i<prods.length; i++){
           var el = document.createElement('P');
           el.innerHTML = prods[i].name;
           $('#app').append(el);
        }
    })
}
document.addEventListener('load', drawPage());

您还可以通过以下方式在将 json 导入数组之前直接对其进行排序： Sort JSON by value

【讨论】：

如果我在我的 html 中使用一个可以在排序和未排序之间切换的按钮。我会创建一个新的函数 functionsorting() { 并包含排序代码吗？或者我是否必须以某种方式将其全部包含在内并将其链接回我的一个函数中的 html？
@James：那么您需要保存按钮的状态（一个布尔值就足够了）并根据该布尔值的值进行排序。每次用户单击按钮时，您都会更改其值

【解决方案2】：

var prod = [
{name: "truck", price: "20000"},
{name: "car", price: "50000"},
{name: "bus", price: "30000"}]

function SortByName(x,y) {
      return ((x.name == y.name) ? 0 : ((x.name > y.name) ? 1 : -1 ));
}
$(function () {
        prod.sort(SortByName);
        console.log(prod)
    });

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：