本文介绍如何使用 jQuery 精准筛选并隐藏「不包含指定文本（例如 ``）」的父级元素，重点解决基于子元素 ID 定位父元素后，按其内部文本内容进行条件隐藏的典型需求。

本文介绍如何使用 jquery 精准筛选并隐藏「不包含指定文本（例如 `*`）」的父级元素，重点解决基于子元素 id 定位父元素后，按其内部文本内容进行条件隐藏的典型需求。

在表单动态控制场景中，常需根据字段是否为必填项（通常用 * 标识）来决定其所在容器（如 或

）的显隐状态。但 jQuery 的 .not() 方法不能直接接收字符串文本作为过滤条件——它只接受选择器、DOM 元素集合或返回布尔值的回调函数。因此，原代码中 checkthis.not("*").hide() 逻辑无效，必须改用函数式过滤。

✅ 正确实现思路

1. 定位目标子元素：通过 ID 选取输入框（如 #guest_first_name, #guest_last_name）；
2. 向上获取父级 ：使用 .parent()；
3. 按文本内容过滤：利用 .not() 的回调函数参数 (i, element)，检查 element.innerHTML 是否*不包含 `` 字符**；
4. 执行隐藏：对不满足条件的元素调用 .hide()。

✅ 推荐代码（兼容性强、语义清晰）

$(document).ready(function() {
    // 选取所有目标输入框，并获取其直接父级 label 元素
    const $labels = $("#guest_first_name, #guest_last_name").parent("label");

    // 隐藏那些 innerHTML 中不包含 "*" 的 label
    $labels.not(function() {
        return $(this).html().includes("*");
    }).hide();
});

? 提示：使用 .html().includes("*") 比正则 /\*/.test(...) 更直观易读；若需严格匹配独立星号（避免误判 *required 等），可升级为正则 /*s*(?=||$)/i，但本例中简单包含判断已足够。

⚠️ 注意事项与最佳实践

• 避免过度依赖 font 标签： 已被 HTML5 废弃，建议改用 * 并通过 CSS 控制样式，后续也可用 $(this).find('.required').length > 0 判断，更健壮；
• .parent() vs .closest()：若父结构嵌套更深（如 ），应改用 .closest("label") 确保捕获最近的语义化父标签；
• 性能考虑：大量元素时，可先缓存 $(this).html() 结果，避免重复解析；
• CSS 替代方案（补充）：纯前端隐藏亦可通过添加类（如 .hidden { display: none; }）配合 CSS 控制，便于统一维护和动画扩展。

✅ 效果验证

运行上述代码后：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

• 含 First name * 的 保持可见；
• 仅含 Last name 的 将被隐藏；
• DOM 结构不变，仅视觉上移除，符合无障碍与 SEO 友好原则。

掌握这种“基于子元素定位 + 父级内容过滤”的模式，可灵活应用于表单分组显示、条件字段折叠、动态步骤导航等真实业务场景。