使用jQuery执行prependTo后点击show more如何恢复列表原有排序

你当前的代码直接修改了DOM节点的实际顺序，没有留存初始的排序信息，所以无法直接还原。只要提前缓存原始列表结构即可，修改后的实现代码如下：

// 页面加载完成后先缓存原始的列表项顺序
const originList = $('.feature-list').children('li').clone();

// 初始状态逻辑：精选项前置，仅展示前4项
$('.featured').prependTo('.feature-list');
$('.feature-list').find('li:gt(3)').hide();

// 点击show more逻辑
$('.more-btn').click(function() {
    // 还原列表为初始的原始排序
    $('.feature-list').html(originList);
    // 展示所有列表项
    $('.feature-list li').show();
    // 可选：如果需要点击后隐藏按钮，可开启下方注释
    // $(this).hide();
});

逻辑说明 #

• 用clone()方法把页面初始加载时的原始li节点全部缓存，缓存内容不会受后续DOM操作的影响
• 点击展示更多时，直接把列表内容替换为提前缓存的原始节点，即可恢复初始排序，再统一显示所有列表项即可

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