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

夏枫姑娘_5678

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

916人浏览过

来源于php中文网

原创

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

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

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

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

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

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

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

jQuery 1.12.4

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

下载

<!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 + PHP 实现表单的 AJAX 实时验证教程

如何使用 jQuery 与 PHP 通过 AJAX 实现表单验证

Bootstrap组件怎么复制粘贴

HTML5 中 requestAnimationFrame 怎么优化复杂页面的渲染帧率

在Bootstrap 4迁移到Bootstrap 5时CSS有哪些核心变动？

相关标签:

jquery

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

上一篇：HTML5对话框无法聚焦_HTML5modal模式下tab键焦点循环设置攻略【指南】下一篇：HTML5Notification通知怎么开_网页消息提醒设置方法【技巧】

作者最新文章

如何使用 AWS SES Go SDK 发送带附件的邮件

2026-11-12 15:00

如何高效转置 Polars DataFrame 中二维数组列的维度

2026-11-12 15:11

AI办公竞争从模型能力转向成本与选择权:豆包工作开放第三方模型接入

2026-11-12 15:14

CSS 实现文本项从右至左逐个省略的响应式布局方案

2026-11-12 15:19

当贝盒子H5二代系列正式开售：8K解码、4K输出，老片源也能更清晰

2026-11-12 15:22

Laravel 9 CRUD: 正确哈希存储用户密码的完整实现

2026-11-12 15:22

阿里重磅官宣千问大模型 Qwen4：核心能力全线进化，千问 App 现已全面接入预览版

2026-11-12 15:24

ESLint 命令行不指定文件时如何自动匹配？——详解配置驱动的文件发现机制

2026-11-12 15:24

如何在 Spring Kafka 中实现手动同步提交并确保消息重试机制生效

2026-11-12 15:25

CSS 实现元素逐个从右向左省略（而非同时截断）的响应式布局方案

2026-11-12 15:28

热门AI工具

Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

AI办公学习 AI搜索引擎

切问学术 Hot

切问学术是一款AI论文写作工具，复旦大学NLP团队推出的AI学术智能体。

Agent智能体

火山引擎 Hot

火山引擎是一款面向企业的云计算与AI服务平台。

AI大模型 AI编程开发

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

AI编程开发 AI大模型

WorkBuddy

一款AI办公效率工具，主要用于腾讯云推出的AI原生桌面智能体工作台，适合需要提升相关任务效率的用户。

AI办公学习 Agent智能体

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

AI编程开发 AI聊天问答

讯飞智文 Hot

一款面向学习和办公场景的AI文档创作工具，可辅助生成PPT与Word文档，提高资料整理和内容制作效率。

文档处理 Excel 表格

Atoms Hot

Atoms是一款AI智能体工具，第一支自动构建真实业务的 AI 团队。

Agent智能体

UpDream Hot

一款AI视频创作工具，主要用于哔哩哔哩推出的自研AI视频创作工具，适合需要提升相关任务效率的用户。

AI视频创作视频生成

相关专题

jquery插件有哪些

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

621

2023.09.12

jquery怎么操作json

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

1276

2023.10.13

jquery删除元素的方法

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

2362

2023.11.10