如何使用jQuery隐藏不包含特定文本（如星号）的父元素实例？

本文共计707个文字，预计阅读时间需要3分钟。

本文字介绍如何使用，请直接查阅相关文档或教程。

在表单动态控制场景中，常需根据字段是否为必填项（通常用 <font color="red">*</font> 标识）来决定其所在容器（如 <label> 或 <div>）的显隐状态。但 jQuery 的 .not() 方法不能直接接收字符串文本作为过滤条件——它只接受选择器、DOM 元素集合或返回布尔值的回调函数。因此，原代码中 checkthis.not("*").hide() 逻辑无效，必须改用函数式过滤。

✅ 正确实现思路

1. 定位目标子元素：通过 ID 选取输入框（如 #guest_first_name, #guest_last_name）；
2. 向上获取父级 <label>：使用 .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(); });

⚠️ 注意事项与最佳实践

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

✅ 效果验证

运行上述代码后：

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

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