我正在构建一个对象数组并将它们输出到 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>您在排序之前输出到 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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句