jQuery 实战：根据子元素是否包含特定文本（如）动态隐藏父级标签

聖光之護

发布时间：2026-02-24 23:44:01

876人浏览过

来源于php中文网

原创

jQuery 实战：根据子元素是否包含特定文本（如）动态隐藏父级标签

本文详解如何使用 jQuery 精准筛选并隐藏不包含指定文本（例如星号 `）的父元素，重点解决parent()` 配合文本内容判断的常见误区，并提供可直接运行的健壮代码方案。

本文详解如何使用 jquery 精准筛选并隐藏不包含指定文本（例如星号 `*`）的父元素，重点解决 `parent()` 配合文本内容判断的常见误区，并提供可直接运行的健壮代码方案。

在表单动态控制场景中，常需根据子元素（如）的上下文文本（例如必填标识 *）来决定是否显示其所属的或外层

。但 jQuery 的 .not() 方法不能直接接收字符串作为文本过滤条件——它只接受选择器、DOM 元素集合或返回布尔值的回调函数。原始代码中 checkthis.not("*").hide() 会失效，因为 * 被误当作 CSS 选择器而非文本内容。

正确做法是：先获取目标子元素的父级（如 $('input[id^="guest_"]').parent('label')），再通过 .not() 的函数参数形式遍历每个父元素，检查其内部 HTML 或文本是否包含 *。推荐使用正则表达式 /\*/ 检测 HTML 字符串（兼顾等内联标签），或用 $(e).text().includes('*') 检测纯文本（更语义化，但忽略格式标签）。

以下是优化后的完整实现：

拾贝

一键同步微信读书所有笔记和划线，并在新标签页回顾

下载

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>

<div>
  <label>
    First name <font color="red">*</font>
    <input type="text" id="guest_first_name">
  </label>
</div>

<br>

<div>
  <label>
    Last name 
    <input type="text" id="guest_last_name">
  </label>
</div>

<script>
$(document).ready(function() {
  // 精确选取目标 input 并获取其 label 父元素
  const targetInputs = $('input[id^="guest_"]');
  const parentLabels = targetInputs.parent('label');

  // 隐藏「不包含 *」的 label（使用正则检测 innerHTML，兼容带标签的 *）
  parentLabels.not(function() {
    return /\*/.test(this.innerHTML);
  }).hide();

  // ✅ 替代方案（推荐）：使用 text() 获取纯文本，避免 HTML 标签干扰
  // parentLabels.filter(function() {
  //   return !$(this).text().includes('*');
  // }).hide();
});
</script>

</body>
</html>

关键要点说明：

✅ 使用 .not(function(index, element) { ... }) 回调，对每个父元素执行自定义判断；
✅ this.innerHTML 可捕获 * 等嵌套结构中的 *，而 $(this).text() 返回纯文本（First name *），二者按需选用；
✅ 选择器 input[id^="guest_"] 比硬编码 ID 列表（#guest_first_name, #guest_last_name）更具扩展性；
⚠️ 避免使用已废弃的标签，建议改用 CSS 类（如 *），提升可维护性；
⚠️ 若需支持多层级父容器（如
...
），可将 .parent('label') 替换为 .closest('label')。

最终效果：含 * 的「First name」label 保持可见，无 * 的「Last name」label 被隐藏。此模式可轻松适配其他文本条件（如 "optional"、"(required)"），是表单条件渲染的可靠实践。

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

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

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

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

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

相关标签:

jquery jquery 正则表达式回调函数字符串 class function dom this innerHTML 选择器 input

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

上一篇：HTML5对话框无法聚焦_HTML5modal模式下tab键焦点循环设置攻略【指南】下一篇：暂无

作者最新文章

Go 语言中跨子目录访问函数的正确方式

2026-02-23 10:11

HTML 中实现“嵌套下拉选项”：通过联动 select 控件模拟二级菜单效果

2026-02-23 10:15

将二进制位字符串安全、精确地还原为 IEEE 754 单精度浮点数

2026-02-23 10:15

Apache Beam Java 实现 JSON 数据按键聚合合并教程

2026-02-23 10:20

Java 中嵌套包的正确声明方式：只需一个完整包名

2026-02-23 10:22

Gradle 离线构建中本地插件的正确配置与依赖管理指南

2026-02-23 10:26

如何在 Eclipse RCP 应用中动态修改“打开编辑器数量上限”设置

2026-02-23 10:29

Go语言中sync.WaitGroup不等待的常见闭包陷阱解析

2026-02-23 10:34

Java中字符串不可变性与对象引用传递的本质解析

2026-02-23 10:34

如何自定义 Stripe 订阅支付页的表单布局（多行卡片输入样式）

2026-02-23 10:40

热门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智能体

相关专题

jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容，供大家免费下载体验。

155

2023.09.12

jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

323

2023.10.13

jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

404

2023.11.10