jQuery 实战：隐藏不包含特定文本（如星号）的父元素

心靈之曲

发布时间：2026-02-24 23:40:03

677人浏览过

来源于php中文网

原创

jQuery 实战：隐藏不包含特定文本（如星号）的父元素

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

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

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

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

✅ 正确实现思路

定位目标子元素：通过 ID 选取输入框（如 #guest_first_name, #guest_last_name）；
向上获取父级 ：使用 .parent()；
按文本内容过滤：利用 .not() 的回调函数参数 (i, element)，检查 element.innerHTML 是否*不包含 `` 字符**；
执行隐藏：对不满足条件的元素调用 .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 控制，便于统一维护和动画扩展。

✅ 效果验证

运行上述代码后：

YOO必优科技-AI写作

智能图文创作平台，让内容创作更简单

下载

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

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

如何正确使用 jQuery 动态填充基于 Selectize 的下拉选择框

jQuery 表格行数值动态求和教程

jQuery 实现表格动态添加行并实时计算数字列总和

jQuery 表格行数值动态求和教程：点击按钮实时计算并更新总和

jQuery UI Sortable 动态更新不可拖拽项的正确实践

相关标签:

jquery html5 jquery 回调函数字符串 class Length dom this innerHTML 选择器 display input SEO

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：jQuery 实战：根据子元素是否包含特定文本（如 *）动态隐藏父级标签下一篇：HTML5对话框无法聚焦_HTML5modal模式下tab键焦点循环设置攻略【指南】

作者最新文章

Angular 组件中对象属性无法在模板中显示的解决方案

2026-02-22 14:00

Java Stream API 实现集合工具类：高效构建键值映射

2026-02-22 14:21

MySQL中STR_TO_DATE日期格式匹配错误的解决方案

2026-02-22 15:06

如何正确使用 MySQL 的 STR_TO_DATE 函数解析日期字符串

2026-02-22 15:43

JSON Schema 中实现“对象至少一个属性非空”的校验策略

2026-02-22 15:49

JSON Schema 实现对象非全空校验：确保至少一个属性有值

2026-02-22 15:58

如何确保 Go Web 服务始终返回带命名空间的空数组而非 null

2026-02-22 16:24

使用 Pandas 填充级联式空值并重构分层 Excel 数据结构

2026-02-22 16:55

如何确保 Go 服务端始终返回带命名空间的空数组而非 null

2026-02-22 17:25

如何解决表单中多个浮动标签（label）相互重叠的问题

2026-02-22 17:35

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

AI 图片处理图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容，可以阅读本专题下面的文章。

540

2023.10.23

HTML与HTML5的区别

HTML与HTML5的区别：1、html5支持矢量图形，html本身不支持；2、html5中可临时存储数据，html不行；3、html5新增了许多控件；4、html本身不支持音频和视频，html5支持；5、html无法处理不准确的语法，html5能够处理等等。想了解更多HTML与HTML5的相关内容，可以阅读本专题下面的文章。

462

2024.03.06

html5从入门到精通汇总

想系统掌握HTML5开发？本合集精选全网优质学习资源，涵盖免费教程、实战项目、视频课程与权威电子书，从基础语法到高级特性（Canvas、本地存储、响应式布局等）一应俱全，适合零基础小白到进阶开发者，助你高效入门并精通HTML5前端开发。

254

2025.12.30

html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验，不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签，还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

220

2025.12.30

html5空格代码怎么写

在HTML5中，空格不能直接通过键盘空格键实现，需使用特定代码。本合集详解常用空格写法： （不间断空格）、&ensp;（半个中文空格）、&emsp;（一个中文空格）及CSS的white-space属性等方法，帮助开发者精准控制页面排版，避免因空格失效导致布局错乱，适用于新手入门与实战参考。

100

2025.12.30

html5怎么做网站教程

想从零开始学做网站？这份《HTML5怎么做网站教程》合集专为新手打造！涵盖HTML5基础语法、页面结构搭建、表单与多媒体嵌入、响应式布局及与CSS3/JavaScript协同开发等核心内容。无需编程基础，手把手教你用纯HTML5创建美观、兼容、移动端友好的现代网页。附实战案例+代码模板，快速上手，轻松迈出Web开发第一步！

165

2025.12.31

HTML5建模教程

想快速掌握HTML5模板搭建？本合集汇集实用HTML5建模教程，从零基础入门到实战开发全覆盖！内容涵盖响应式布局、语义化标签、Canvas绘图、表单验证及移动端适配等核心技能，提供可直接复用的模板结构与代码示例。无需复杂配置，助你高效构建现代网页，轻松上手前端开发！

2025.12.31

html5怎么使用

想快速上手HTML5开发？本合集为你整理最实用的HTML5使用指南！涵盖HTML5基础语法、主流框架（如Bootstrap、Vue、React）集成方法，以及无需安装、直接在线编辑运行的平台推荐（如CodePen、JSFiddle）。无论你是新手还是进阶开发者，都能轻松掌握HTML5网页制作、响应式布局与交互功能开发，零配置开启高效前端编程之旅！

2025.12.31