使用 jQuery 隐藏不包含特定文本的父元素-js教程-PHP中文网

使用 jQuery 隐藏不包含特定文本的父元素

聖光之護

发布： 2025-10-16 10:42:01

原创

758人浏览过

使用 jquery 隐藏不包含特定文本的父元素

本文旨在指导开发者使用 jQuery 隐藏那些子元素指定的父元素，但父元素本身不包含特定文本的情况。通过结合 jQuery 的选择器、`parent()` 方法以及 `not()` 方法，我们可以高效地筛选并操作 DOM 元素，实现根据文本内容动态调整页面显示效果。本文将提供详细的代码示例和解释，帮助你理解并应用这一技术。

在前端开发中，经常会遇到需要根据页面元素的内容动态调整其显示的需求。例如，根据某个父元素是否包含特定文本来决定是否隐藏该元素。本文将介绍如何使用 jQuery 实现这一功能。

问题分析

核心问题在于如何选择到指定的父元素，并判断其是否包含特定文本。如果父元素不包含特定文本，则将其隐藏。

解决方案

以下是一种使用 jQuery 实现该功能的方案：

选择目标子元素： 使用 jQuery 选择器选中所有需要检查的子元素。
获取父元素： 使用 .parent() 方法获取这些子元素的父元素。
筛选父元素： 使用 .not() 方法结合正则表达式，筛选出不包含特定文本的父元素。
隐藏父元素： 使用 .hide() 方法隐藏筛选出的父元素。

代码示例

TTS Free Online免费文本转语音

免费的文字生成语音网站，包含各种方言（东北话、陕西话、粤语、闽南语）

查看详情

以下是一个完整的代码示例：

<!DOCTYPE html>
<html>
<head>
<title>Hide Parent Element</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
    let checkthis = $("input[type='text']").parent();
    var removewithout = /\*/;
    checkthis.not((i, e) => removewithout.test(e.innerHTML)).hide();
});
</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>

</body>
</html>

登录后复制

代码解释

$("input[type='text']"): 选择所有 type 属性为 text 的 input 元素。
.parent(): 获取这些 input 元素的父元素，即 label 元素。
var removewithout = /\*/;: 定义一个正则表达式，用于匹配星号 *。因为 * 在正则表达式中是特殊字符，需要使用 \ 进行转义。
.not((i, e) => removewithout.test(e.innerHTML)): 使用 .not() 方法筛选父元素。 (i, e) => removewithout.test(e.innerHTML) 是一个回调函数，它接受两个参数：i (索引) 和 e (当前元素)。 e.innerHTML 获取当前父元素的 HTML 内容。 removewithout.test(e.innerHTML) 使用正则表达式测试 HTML 内容是否包含星号。如果包含星号，则 .not() 方法会排除该父元素；否则，保留该父元素。
.hide(): 隐藏所有被筛选出的父元素。

注意事项

确保在 DOM 加载完成后执行 jQuery 代码，可以使用 $(document).ready() 函数。
正则表达式的使用需要注意特殊字符的转义。
.innerHTML 属性获取的是元素的完整 HTML 内容，包括标签和文本。
可以根据实际需求修改选择器和正则表达式，以适应不同的场景。
如果需要匹配更复杂的文本模式，可以使用更复杂的正则表达式。

总结

通过结合 jQuery 的选择器、parent() 方法、not() 方法和正则表达式，我们可以灵活地筛选和操作 DOM 元素，实现根据文本内容动态调整页面显示效果。这种方法可以应用于各种需要根据元素内容进行动态调整的场景，例如表单验证、数据过滤等。理解并掌握这些技术，可以提高前端开发的效率和灵活性。

以上就是使用 jQuery 隐藏不包含特定文本的父元素的详细内容，更多请关注php中文网其它相关文章！