如何用jQuery匹配img与ul的相同类名并自动统计对应图片数量

核心实现逻辑 #

完全复用「菜单项类名与图片类名一致」的现有规则，自动识别匹配关系，替代逐类硬编码统计的重复逻辑，后续新增任意数量的国家、年份分类时，无需修改统计代码即可自动生成计数。

前置结构约定 #

为保证自动识别的准确性，需提前对齐两类DOM的类名规则：

• 所有待分类的<img>元素，直接在类名中添加对应分类标识，例如法国类图片加france、1990年份图片加year-1990
• 分类菜单的每个<li>菜单项，添加与对应分类完全同名的类名，例如法国选项的li类名为france，1990年份选项的li类名为year-1990
• 每个菜单项内部预留计数占位元素，例如<span class="count"></span>，无需提前写入内容

实现代码 #

// 页面DOM加载完成后执行
$(document).ready(function() {
  /**
   * 自动更新全部分类的图片计数
   * 图片动态加载完成后可重复调用该方法刷新计数
   */
  function refreshCategoryCount() {
    // 第一步：收集所有图片上的有效分类类名，避免误匹配菜单自身的UI类
    const validCategoryCls = new Set();
    $('img').each(function() {
      // 遍历单张图片的所有类名，排除图片自身的通用样式类
      this.classList.forEach(cls => {
        if (!['lazyload', 'thumbnail', 'img-fluid'].includes(cls)) {
          validCategoryCls.add(cls);
        }
      });
    });

    // 第二步：遍历所有菜单项，匹配对应分类类名并填充计数
    $('.category-menu li').each(function() {
      const $menuItem = $(this);
      // 找到当前菜单项上属于有效分类集合的类名
      const matchCategory = Array.from(this.classList).find(cls => validCategoryCls.has(cls));
      // 无匹配分类的菜单项直接跳过
      if (!matchCategory) return;
      // 统计对应类名的图片总数
      const imageCount = $(`img.${matchCategory}`).length;
      // 填充计数到菜单项的占位span中
      $menuItem.find('span.count').text(`(${imageCount})`);
    });
  }

  // 初始页面加载完成后执行一次全量计数刷新
  refreshCategoryCount();
});

特性说明 #

• 完全零硬编码：后续扩展到100个国家、300+年份分类时，只需要给对应图片和菜单项加上同名分类类，不需要修改任何统计逻辑
• 防误匹配：通过提前收集图片上存在的分类类名集合，不会把菜单自带的UI类（如active、menu-item、hover）误识别为分类类
• 适配动态场景：将统计逻辑封装为独立函数，在异步加载图片、动态切换分类后调用refreshCategoryCount()即可刷新计数
• 灵活定制：可根据业务需求增加分支判断，例如当图片计数为0时，自动隐藏对应菜单项的计数标识

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