如何控制项目在动态呈现的 EJS 列表中的放置位置？答案

【问题标题】：How can I control where an item is placed in a dynamically rendered EJS list?如何控制项目在动态呈现的 EJS 列表中的放置位置？
【发布时间】：2022-07-04 22:27:33
【问题描述】：

我在 EJS 中有一个 <ol>，其中包含从数据库中的对象获取的信息。当我创建新对象时，列表会获得一个新的<li> 及其信息。这些对象都有一个日期作为它们的第一个字段。

是否可以让<ol> 根据此日期字段按时间顺序排序？即，列表中最近的日期为“1”，但如果添加了一个日期较早的对象，它将变为“1”，而前一个最近的日期变为“2”。日期也包含在其自己的<span> 列表中。

这是我的 EJS 现在的样子：

    <ol class="shows">
    <% for(let i=0; i < info.length; i++) {%>
        <li class="show">
            <span class="bold"><%= info[i].date %></span><span>  </span><span><%= info[i].bands %></span><span> - </span><span><%= info[i].venue %></span><span> - </span><span><%= info[i].ticketPrice %></span><span> - </span><span><%= info[i].startTime %></span><span> - </span><span><a href="<%= info[i].ticketLink %>">♣</a></span>
        </li>
    <% } %>
    </ol>

【问题讨论】：

标签： javascript css server ejs

【解决方案1】：

只需对数组进行排序...

info.sort((a,b)=> b-a)

【讨论】：

您也可以在服务器端对其进行排序...但是如果您在前端动态添加它们，那么您需要使用或将新项目放在正确的位置。没有什么神奇的，for循环只是按顺序遍历项目，所以如果你改变你的顺序，你就会改变显示的顺序。