jquery - 使用 jquery 只获取可见文本

Question

假设我有一些这样的 html:

<div id="content">Foo<span style='display:none'>hidden</span>Bar</div>

在现实中，这更复杂，并且使用 ng-hide 和类似的方式由 angular 生成。我需要从用户可见的 content div 中获取所有文本。在这种情况下，我想获取 FooBar。

$('#content').text() 是我发现的最接近的东西，但在这种情况下它给了我 FoohiddenBar。有什么好的方法可以只获取 div 的可见内容吗？我真的需要一个跳过隐藏元素的 text() 函数。

Answer 1

创建一个克隆，将其添加到 DOM(正如 slindberg 所指出的)，删除所有隐藏元素，然后获取文本:

var clone = $('#content').clone();

clone.appendTo('body').find(':hidden').remove();

var text = clone.text();

clone.remove();

FIDDLE