如何使用jQuery实现div元素的升序、降序双向排序功能？

该需求完全可实现，核心逻辑是将父容器下的子节点转换为数组，按ID数值排序后重新插入父容器即可，DOM节点原有内容、绑定事件不会丢失。

参考代码 #

HTML结构（在你现有代码基础上新增切换按钮即可） #

<!-- 你原有结构保持不变 -->
<div id='main'>
    <div id='612'></div>
    <div id='320'></div>
    ...
    <div id='1'></div>
</div>
<!-- 新增切换按钮 -->
<button id="sortBtn">切换排序顺序</button>

jQuery脚本 #

// 记录当前排序状态，默认初始为降序，和你给出的初始结构一致
let currentIsAsc = false;

$('#sortBtn').click(function() {
    // 获取所有子div转为数组
    const childDivs = $('#main > div').toArray();
    
    // 按ID的数值大小排序
    childDivs.sort(function(a, b) {
        const idNumA = parseInt(a.id, 10);
        const idNumB = parseInt(b.id, 10);
        return currentIsAsc ? idNumB - idNumA : idNumA - idNumB;
    });

    // 重新插入到父容器，自动覆盖原有顺序
    $('#main').append(childDivs);

    // 切换排序状态，下次点击执行反向排序
    currentIsAsc = !currentIsAsc;
    // 可选：修改按钮文字提示当前状态
    $(this).text(currentIsAsc ? '切换为降序' : '切换为升序');
});

注意事项 #

• 排序时必须将ID转为整数再比较，否则会按照字符串规则排序，出现10排在2之前的错误
• append方法会直接移动原有DOM节点，不需要手动删除旧节点，不会出现重复元素问题

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