如何用jQuery基于类名统计元素数量并简化重复Tab统计代码？

需求说明 #

需要简化现有代码，实现：

• 统计tab1至tab4每个Tab内，带有region1至region5类名的标签数量
• 将统计结果显示到对应Regions_latam、Regions_global、Regions_na、Regions_emea、Regions_atci容器内的p标签中

简化后代码 #

$(document).ready(function(){
    // 区域类名与目标展示容器的映射关系
    const regionMap = {
        region1: ".Regions_latam",
        region2: ".Regions_global",
        region3: ".Regions_na",
        region4: ".Regions_emea",
        region5: ".Regions_atci"
    };

    // 统一统计更新函数：传入Tab选择器，批量处理所有区域统计
    function updateRegionCounts(tabSelector) {
        Object.entries(regionMap).forEach(([regionClass, containerSelector]) => {
            const count = $(`${tabSelector} .${regionClass}`).length;
            $(`${containerSelector} p`).text(`${count} Events`);
        });
    }

    // 页面加载时默认统计tab1的数据
    updateRegionCounts('#tab1');
    console.log($('#tab1 .region1').length);

    // 为所有Tab按钮绑定统一点击事件
    $(".tab1, .tab2, .tab3, .tab4").click(function() {
        const tabId = `#${$(this).attr('class').match(/tab\d+/)[0]}`;
        updateRegionCounts(tabId);
        // 保留原tab1的日志输出
        if (tabId === '#tab1') {
            console.log("tab1 clicked");
        }
    });
});

简化思路 #

1. 映射关系替代重复代码：用regionMap存储区域类名和对应展示容器的关联，避免重复编写每个区域的DOM选择逻辑
2. 封装统一处理函数：把统计和更新DOM的逻辑抽成updateRegionCounts函数，传入Tab选择器即可完成该Tab下所有区域的统计
3. 统一事件绑定：所有Tab按钮共用同一个点击事件处理函数，通过元素class获取对应Tab的ID，调用统一函数完成更新
4. 降低维护成本：后续新增区域或Tab时，只需修改regionMap或调整选择器，无需重复编写大量重复代码

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