jQuery技能筛选时无法隐藏完整.candidate-single节点问题咨询

你的核心问题在于操作了所有.candidate-single元素，而非当前匹配/不匹配的.skills-list对应的父级候选容器。当你用$('.candidate-single').addClass('is-hidden')时，会选中页面上所有该类别的div，导致所有候选框同步显示/隐藏，而非单个目标容器。

具体修正要点： #

• 在.each()循环中，通过当前的.skills-list元素（即this），用.closest('.candidate-single')定位到它所属的父级候选容器，只对这个特定容器做显示/隐藏操作。
• 将containsi的jQuery扩展移到keyup事件外部，避免每次按键都重复定义，提升性能。
• 移除不必要的setTimeout，无动画需求时直接操作类即可。

修正后的完整代码 #

// 扩展不区分大小写的contains选择器，仅执行一次
$.extend($.expr[':'], {
    'containsi': function(elem, i, match, array) {
        return (elem.textContent || elem.innerText || '').toLowerCase()
            .indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

$(document).ready(function() { 
    $("#candidate-skills").keyup(function() { 
        var searchTerm = $(this).val().trim(); // 用this简化DOM查询，trim处理首尾空格
        var searchSplit = searchTerm.replace(/ /g, '"):containsi("');

        // 搜索框为空时，显示所有候选框
        $(".candidate-single").removeClass('is-hidden');

        if (searchTerm) {
            // 隐藏不匹配的候选容器
            $(".skills-list").not(":containsi('" + searchSplit + "')").each(function() {
                $(this).closest('.candidate-single').addClass('is-hidden');
            });
            // 显示匹配的候选容器
            $(".skills-list:containsi('" + searchSplit + "')").each(function() {
                $(this).closest('.candidate-single').removeClass('is-hidden');
            });
        }
    }); 
});

额外优化说明： #

• 用$(this).val()替代重复的$("#candidate-skills").val()，减少DOM查询次数。
• 增加trim()处理搜索词，避免空空格导致的无效过滤。
• 新增if (searchTerm)判断，搜索框为空时自动显示所有候选，逻辑更符合用户预期。

这样修改后，每个不匹配的.skills-list对应的.candidate-single会被单独隐藏，完全符合你的需求。

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