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