jQuery动态获取点击元素下一个li文本并生成按钮的问题求助

问题1：修复点击.match元素生成正确文本按钮的逻辑 #

错误根源

• 使用$j(this).next().text()时，最后一个.match元素没有同级后续元素，导致文本为空
• 全局给所有button添加clicked类，会误将关闭按钮也纳入删除范围
• 未处理文本前后冗余空格，可能导致按钮文本显示异常

修正代码

$j('.match').click(function () {
    const $currentItem = $j(this);
    // 仅获取同级下一个.match元素的文本，无后续元素时使用默认提示
    const nextMatchText = $currentItem.next('.match').text().trim() || '无后续赛事';
    
    if ($currentItem.hasClass('game-finished')) {
        // 直接创建带指定类的按钮，避免影响原有按钮
        const newBtn = $j(`<button class="clicked">${nextMatchText}</button>`);
        $j('#buttons').append(newBtn);
        
        // 样式调整逻辑保留
        $j('#new-btn').addClass('ui-btn-new');
        $j('.start-time, .start-date').css({ fontSize: '1em' });
    } else {
        $j('#new-btn').removeClass('ui-btn-new');
    }
});

问题2：优化关闭按钮逻辑（避免误删） #

原代码会删除所有带clicked类的按钮，调整后仅删除生成的赛事按钮：

$j('#close').click(function () {
    $j('#buttons .clicked').remove();
});

问题3：按时间重新排序.match元素 #

假设.match元素的日期文本为浏览器可解析格式（如YYYY-MM-DD），实现排序逻辑：

// 获取存放赛事列表的父ul容器
const $matchContainer = $j('.match').parent('ul');

// 对所有.match元素按日期排序
const sortedItems = $matchContainer.children('.match').sort((a, b) => {
    // 提取每个li的纯日期文本（排除子ul内容）
    const getDateText = (elem) => {
        return $j(elem).contents().filter(() => this.nodeType === 3).text().trim();
    };
    const dateA = new Date(getDateText(a));
    const dateB = new Date(getDateText(b));
    
    // 升序排序（旧日期在前），需降序则返回 dateB - dateA
    return dateA - dateB;
});

// 替换原列表为排序后的元素
$matchContainer.empty().append(sortedItems);

若日期为自定义格式（如DD-MM-YYYY），需先将文本转换为标准日期格式再创建Date对象。

内容的提问来源于stack exchange，提问作者Andy Smith Hitchens