如何用jQuery根据无序列表li数量动态隐藏对应button元素

算力阿峰

2026-10-4

问题核心原因

1. this指向错误

你在each()中使用了箭头函数，箭头函数不会绑定自己的this，会继承外层作用域的this指向，这里this实际指向window对象，并不是当前遍历的ul元素。这就导致你执行$(this).find('button')的时候，实际是从整个文档里查找所有按钮，只要遍历到第一个符合<=6的ul，就会给所有按钮加上隐藏类，所以所有按钮都被隐藏了。

2. 按钮查找逻辑错误

按钮是ul的同级后续元素，不属于ul的子元素，就算this指向正确，用find()（专门查找后代元素）也永远无法找到对应的按钮。

修复后的代码

$('ul.category-menu').each(function () {
  // 拿到当前遍历的ul
  const $currentUl = $(this);
  // 统计li数量
  const liCount = $currentUl.children('li').length;
  // 找到对应按钮：两种方式二选一
  // 方式1：直接找ul的下一个同级button，适合结构固定的场景
  const $targetBtn = $currentUl.next('button');
  // 方式2：通过id关联查找，容错性更高，就算结构变动只要属性对应就生效
  // const $targetBtn = $(`button[href="#${$currentUl.attr('id')}"]`);

  if (liCount <= 6) {
    $targetBtn.addClass('d-none');
  }
});