WordPress站点API加载的UL课程列表如何触发自定义JS排序（含加载更多，不修改源码）

1. 用MutationObserver监听DOM变化（首选无侵入方案） #

这是最稳妥的方式，不需要改动WordPress的API请求逻辑，直接监听课程列表容器的DOM变化，不管是初始加载还是点击「加载更多」新增内容，只要列表里有新元素添加，就自动触发排序脚本。

实现代码： #

首先保留你已经写好的排序函数，比如：

function sortCourseList() {
  // 替换成你实际的课程列表ul选择器
  const courseList = document.querySelector('ul.course-list');
  if (!courseList) return;

  // 这里是你已经写好的排序逻辑，示例按文本排序
  const courseItems = Array.from(courseList.querySelectorAll('li'));
  courseItems.sort((a, b) => {
    const textA = a.textContent.trim().toLowerCase();
    const textB = b.textContent.trim().toLowerCase();
    return textA.localeCompare(textB);
  });

  // 重新插入排序后的项
  courseList.innerHTML = '';
  courseItems.forEach(item => courseList.appendChild(item));
}

然后添加观察者逻辑：

// 目标：课程列表的ul容器，替换成实际选择器
const targetList = document.querySelector('ul.course-list');
if (targetList) {
  // 配置监听选项：只关注子节点的添加/移除
  const observerConfig = { childList: true, subtree: true };

  // DOM变化时触发的回调
  const domChangeCallback = (mutations) => {
    // 检查是否有新元素被添加
    for (const mutation of mutations) {
      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
        // 延迟100ms确保元素完全渲染，避免DOM未就绪
        setTimeout(sortCourseList, 100);
        break; // 避免一次DOM变化多次触发排序
      }
    }
  };

  // 创建并启动观察者
  const listObserver = new MutationObserver(domChangeCallback);
  listObserver.observe(targetList, observerConfig);

  // 初始加载时先执行一次排序，防止初始列表已存在但未触发变化
  sortCourseList();
}

2. 搭配加载更多按钮监听（辅助兜底） #

如果某些场景下MutationObserver没触发（比如加载更多是先清空列表再重新插入），可以额外监听加载更多按钮的点击事件，兜底执行排序：

// 替换成你实际的加载更多按钮选择器
const loadMoreBtn = document.querySelector('.load-more-btn');
if (loadMoreBtn) {
  loadMoreBtn.addEventListener('click', () => {
    // 延迟时间根据API响应速度调整，确保新内容加载完成
    setTimeout(sortCourseList, 500);
  });
}

关键注意点： #

• 务必把代码中的选择器（ul.course-list、.load-more-btn）替换成你站点实际的元素类名/ID，用浏览器开发者工具就能查到。
• 延迟时间可以根据站点加载速度微调，确保新内容完全渲染后再排序。
• MutationObserver兼容绝大多数现代浏览器（IE11及以上支持），不用担心兼容性问题。

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