点击时如何对包含数字的div元素实现升序及降序排序功能

问题核心原因 #

1. 取值逻辑错误：原getCellValue方法中传入的row本身就是.list_item节点，不需要额外查找子级.list_item
2. 价格未做格式化：原价格文本包含空格、$、From字样等非数字内容，无法被识别为有效数字参与排序
3. 原排序触发逻辑错误地将所有价格文本拼接后作为排序索引依据，逻辑不成立

修正后可用代码 #

原有HTML、CSS代码无需修改，仅替换JS部分即可实现点击价格表头切换升/降序排序：

jQuery(function ($) {
    // 记录排序方向，默认首次点击为升序
    let isAsc = true;
    $('#tsection').on('click', '.thead .price', function () {
        const tbody = $('#tsection .tbody').eq(0);
        // 提取所有行并按价格数值排序
        const sortedRows = tbody.find('.list_item').toArray().sort((a, b) => {
            // 清理价格文本中非数字字符，转成数值
            const priceA = Number($(a).find('.price').text().replace(/[^0-9]/g, ''));
            const priceB = Number($(b).find('.price').text().replace(/[^0-9]/g, ''));
            return priceA - priceB;
        });
        // 切换排序方向
        isAsc = !isAsc;
        if (!isAsc) sortedRows.reverse();
        // 重新渲染排序后的行
        sortedRows.forEach(row => tbody.append(row));
    })
});

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