如何实现Timeline.js时间线日期倒序排列

你所用的jquery.timeline插件没有内置倒序配置项，插件完全按照容器内现有DOM节点的顺序渲染时间线，直接在初始化前反转容器内的子节点顺序即可实现2022→2021→2020的倒序效果，无需修改插件源码。

实现代码 #

原有插件引入代码保持不变：

<script type="text/javascript" src="/javascript/works/jquery.timeline.min.js"></script>

修改初始化逻辑，先反转DOM再调用插件初始化方法：

const $timeline = $('.timelineLight');
// 将所有时间线子节点倒序后重新插入容器
$timeline.append($timeline.children().get().reverse());
// 按原配置初始化即可
$timeline.timeline({
    openTriggerClass: '.trigger_open',
    itemMargin: 44,
    startItem: 'first'
})

注意事项 #

• 如果时间线内容是通过接口动态渲染的，必须等待所有时间线条目都插入DOM完成后，再执行反转和初始化操作，否则会出现排序错乱。
• 反转DOM后startItem: 'first'配置对应的就是排序后最顶部的最新年份条目，符合常规业务中默认打开最新时间节点的需求，无需额外调整该配置。
• 如果反转DOM操作导致子节点上提前绑定的事件失效，可以直接修改jquery.timeline.min.js源码，找到内部遍历时间线条目的逻辑，将正序遍历改为倒序遍历即可，优先推荐上述DOM反转方案，侵入性更低。

内容的提问来源于stack exchange，提问作者Gyvv