如何统计页面<a>元素数量并除以100设置Flickity导航宽度？

很高兴能帮你解决这个Flickity导航的宽度适配问题！针对你提到的场景——每个页面导航<a>元素数量不同，且因Flickity使用绝对定位无法用Flexbox，需要通过计算100% / 导航项数量来设置每个链接的宽度，这里有两种实用的实现方案：

方案一：使用jQuery（适配WordPress环境） #

由于WordPress通常默认加载jQuery，这个方案可以快速上手：

jQuery(document).ready(function($) {
  // 获取.tab-nav下的所有<a>元素数量
  const navItemCount = $('.tab-nav a').length;
  
  // 避免除以0的边界情况
  if (navItemCount > 0) {
    // 计算每个导航项的宽度百分比
    const itemWidth = `${100 / navItemCount}%`;
    // 给所有导航项设置宽度
    $('.tab-nav a').css('width', itemWidth);
  }
});

方案二：原生JavaScript实现（无需依赖jQuery） #

如果偏好轻量的原生JS写法，也可以用下面的代码：

document.addEventListener('DOMContentLoaded', function() {
  // 获取导航容器
  const tabNav = document.querySelector('.tab-nav');
  if (!tabNav) return;
  
  // 获取所有导航项
  const navItems = tabNav.querySelectorAll('a');
  const navItemCount = navItems.length;
  
  if (navItemCount > 0) {
    const itemWidth = `${100 / navItemCount}%`;
    // 遍历设置每个项的宽度
    navItems.forEach(item => {
      item.style.width = itemWidth;
    });
  }
});

额外优化建议 #

• 确保导航容器.tab-nav设置了width: 100%和position: relative，这样绝对定位的子元素能以容器为参照系，宽度计算更准确：

.tab-nav {
  width: 100%;
  position: relative;
}

• 保留你原来的基础样式，只需要移除固定的宽度设置，让动态计算的宽度生效即可。

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