在前端开发中，jQuery 是一个广泛使用的 JavaScript 库。其中，.text() 方法可用于获取或设置元素的文本内容。然而，在某些情况下，我们可能需要排除子元素的文本内容。本文将介绍如何使用 jQuery 的 .contents() 和 .filter() 方法来实现这个目标。
.contents()
首先，让我们来看一下 .contents() 方法。它可以用于获取元素的所有子节点，包括文本节点和元素节点。下面是一个示例：
---- ------------ ---------- --- ------
----- ------ - ------------- -------------------------------
输出结果如下：
------------ ------
可以看到，.contents() 方法返回了一个由两个元素组成的数组，分别是 <p> 元素和文本节点 "bar"。接下来，我们需要用 .filter() 方法来排除 <p> 元素。
.filter()
.filter() 方法可以用于过滤元素集合，并返回符合条件的元素。下面是一个示例：
----- -------- - ----- ------- ----- ---------------- - --------------------- ------------------------------
输出结果如下：
------------
可以看到，.filter() 方法返回了一个只含有 <p> 元素的集合。接下来，我们需要把这个方法应用到我们的示例中。
实现排除子元素的文本内容
现在，我们已经有了两个方法：.contents() 和 .filter()。接下来，我们需要把它们结合起来，以实现排除子元素的文本内容。下面是一个示例：
---- ------------ ------ -------------------- --- ------
----- ------ - ------------- ----- -------- - ----------------------------------- - ------ ------------- --- - -- ----------------- --- ----- ---- - ----------------------- - ------ ---------------- -- -------------- -- --- ------------------ ------------------
输出结果如下：
---
可以看到，我们成功地排除了 <p> 元素中的文本 "foo" 和 <span> 元素中的文本 "bar"，只保留了文本节点 "baz"。
结论
通过使用 .contents() 和 .filter() 方法，我们可以成功地排除元素的子元素，从而获得正确的文本内容。当然，这只是一个简单的示例，实际项目中可能有更复杂的情况需要处理。希望本文能够为你提供一些帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26546