Question

我正在构建对象数组并将其输出为HTML。然后，我对这些对象进行排序，以按courseTitle属性按字母顺序排序。

虽然有些东西无法正常工作。

//variable declaration
var Learning = [
  {
    courseTitle: "Title B",
    courseDesc: "description"
  },
  {
    courseTitle: "Title A",
    courseDesc: "description"
  }  
];

//array output to HTML
$.each(Learning, function (key, value) {
  var item = value;
  var newcontent = 
      `<ul>` +
        `<li>` + item.courseTitle + `</li>` +
        `<li>` + item.courseDesc + `</li>` +
      `</ul>`
      var html = $("#Learning").html();
  $("#Learning").html(html+newcontent);

});



//sorts ascending a > b
Learning.sort(function(a, b){
  if(a.courseTitle < b.courseTitle) { return -1; }
  if(a.courseTitle > b.courseTitle) { return 1; }
  return 0;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="Learning"></div>

Answer 1

在排序之前，您正在输出为HTML。更改数据本身不会反应性地更改DOM。因此，您需要将之前排序到附加到DOM的位置。

以下将起作用：

//variable declaration
var Learning = [
  {
    courseTitle: "Title B",
    courseDesc: "description"
  },
  {
    courseTitle: "Title A",
    courseDesc: "description"
  }  
];





//sorts ascending a > b
Learning.sort(function(a, b){
  if(a.courseTitle < b.courseTitle) { return -1; }
  if(a.courseTitle > b.courseTitle) { return 1; }
  return 0;
})

//array output to HTML
$.each(Learning, function (key, value) {
  var item = value;
  var newcontent = 
      `<ul>` +
        `<li>` + item.courseTitle + `</li>` +
        `<li>` + item.courseDesc + `</li>` +
      `</ul>`
      var html = $("#Learning").html();
  $("#Learning").html(html+newcontent);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="Learning"></div>

Answer 2

在将原始数据数组的内容提交到DOM后对其进行排序不会自动更新其在DOM中的排序顺序。 DOM不知道您更改了原始数组，因为它与原始数组没有关系。

如果要对项目进行排序，则必须先将其添加到html中。

如果将排序调用移至$ .each之前，则会看到它对它们进行了正确排序。

为什么我的输出数组不能正确自动排序（按字母顺序）？

2 个答案: