jQuery如何根据父section的termid_类隐藏无对应类的子section

原代码存在的核心问题 #

• 类名拼接错误：正则提取的current_termID是纯数字（比如示例中的8），但子元素的类是termid_8，直接传入纯数字给hasClass()无法匹配到对应类
• 未遍历子元素：直接调用$('.school_course_section').hasClass()只会判断集合中第一个元素的类属性，不会批量检查所有子section
• this指向错误：代码中未进入子元素遍历上下文，$(this)指向的是全局window对象，不是要操作的子section
• 逻辑判断错误：hasClass()返回的是布尔值（true/false），和空字符串''做相等判断的逻辑完全不成立

修正后的代码 #

jQuery(function ($) {
    // 提取主section的完整termid类名
    const mainTermClass = $('#school_section').attr('class').match(/(?:\s|^)(termid_\d+)/)[1];
    // 遍历所有课程子section
    $('.school_course_section').each(function () {
        // 不包含对应类则隐藏
        if (!$(this).hasClass(mainTermClass)) {
            $(this).hide();
        }
    });
});

可选容错处理 #

如果存在主section没有termid_前缀类的场景，可以增加正则匹配结果非空判断，避免报错：

jQuery(function ($) {
    const matchResult = $('#school_section').attr('class').match(/(?:\s|^)(termid_\d+)/);
    // 匹配不到对应类直接终止执行
    if (!matchResult) return;
    const mainTermClass = matchResult[1];
    $('.school_course_section').each(function () {
        if (!$(this).hasClass(mainTermClass)) {
            $(this).hide();
        }
    });
});

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