如何让resultLength获取当前子元素长度？解决元素隐藏逻辑异常

需求与问题 #

• 需求：当[fs-cmsfilter-element="list"]元素无子元素时隐藏.pagination_wrapper，有子元素则显示。
• 问题：调用pagiHide函数时，resultLength始终获取之前的子元素长度，无法反映当前实时值。即使将resultLength从函数外移至函数内，问题依然存在。

原代码示例：

function pagiHide() {
  let resultLength = $(`[fs-cmsfilter-element="list"]`).children().length;
  if (resultLength == 0) {
    $('.pagination_wrapper').addClass('hide');
    console.log(resultLength);
    return;
  } else {
    $('.pagination_wrapper').removeClass('hide');
    console.log(resultLength);
    return;
  }
}

原因分析 #

核心问题是DOM更新和函数执行时机不匹配：调用pagiHide的时机早于[fs-cmsfilter-element="list"]元素的子元素完成更新的时机，导致函数读取的还是更新前的DOM状态。

解决方案 #

方案1：绑定到CMS筛选的内置事件 #

由于使用的是fs-cmsfilter（Webflow CMS筛选工具），它提供了专属事件钩子，可在筛选完成、DOM更新后触发pagiHide：

// 监听筛选初始化完成事件
$(document).on('fs-cmsfilter:ready', pagiHide);
// 监听每次筛选执行完成事件
$(document).on('fs-cmsfilter:filter', pagiHide);

function pagiHide() {
  const resultLength = $(`[fs-cmsfilter-element="list"]`).children().length;
  // 用toggleClass简化逻辑，第二个参数控制类的添加/移除
  $('.pagination_wrapper').toggleClass('hide', resultLength === 0);
  console.log(resultLength);
}

方案2：用MutationObserver监听DOM变化 #

如果无法依赖CMS内置事件，可使用原生MutationObserver监听目标元素的子元素变化，自动触发逻辑：

const targetList = document.querySelector('[fs-cmsfilter-element="list"]');
// 创建观察者实例
const observer = new MutationObserver(() => pagiHide());

// 配置观察规则：监听子元素的添加/移除
observer.observe(targetList, { childList: true });

function pagiHide() {
  const resultLength = $(targetList).children().length;
  $('.pagination_wrapper').toggleClass('hide', resultLength === 0);
  console.log(resultLength);
}

// 页面初始化时先执行一次
pagiHide();

方案3：确保手动调用的时机正确 #

如果是手动触发pagiHide（比如按钮点击），需确保在DOM更新完成后再调用：

• 若为AJAX加载内容，将pagiHide()放在success或done回调中；
• 若为其他DOM操作，放在操作完成的回调函数内执行。

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