需要jQuery text()函数来忽略隐藏的元素 [英] Need jQuery text() function to ignore hidden elements

问题描述

我的div设置如下:

<div id="test"> <p>Hello</p> <p style="display: none">Goodbye</p> </div>

为澄清起见，这是最简单的示例. div可以有任意数量的n个深层嵌套子级.

To clarify, this is the simplest example. The div could have any arbitrary number of n deep nested children.

$('#test').getText()返回"Hello Goodbye".这是在Firebug中测试的一个衬板:jQuery('<div id="test"> <p>Hello</p> <p style="display: none">Goodbye</p> </div>').text()

$('#test').getText() returns 'Hello Goodbye'. Here's a one liner to test in Firebug: jQuery('<div id="test"> <p>Hello</p> <p style="display: none">Goodbye</p> </div>').text()

这似乎是因为jQuery内部使用的textContent(用于非IE)将隐藏的元素作为文本的一部分返回. r.

This seems to be because what jQuery uses internally, textContent (for non IE), returns hidden elements as part of the text. Hrmph.

有没有一种方法可以忽略display:noned元素而返回文本内容?基本上，我试图模仿您用鼠标突出显示div并将其复制到系统剪贴板所得到的文本.那会忽略隐藏的文本.

Is there a way to return the text content ignoring display:none'd elements? Basically I am trying to mimic the text you would get from highlighting the div with your mouse and copying to system clipboard. That ignores hidden text.

有趣的是，如果创建一个选择范围并从中获取文本，那么它还会在display:none元素内返回文本.

Interestingly, if you create a selection range and get the text from it, that also returns text inside display:none elements.

var range = document.body.createTextRange();
range.moveToElementText($('#test')[0]);
range.select();

console.log(range.toString()); // Also logs Hello Goodbye!

因此，在display:none元素方面，创建文档选择范围似乎与用鼠标突出显示的功能不同.我如何解决这个肮脏的泡菜难题?

So creating a document selection range doesn't appear to do the same thing as highlighting with the mouse in terms of display:none elements. How do I get around this dirty pickle conundrum?

建议使用.filter(':visible').text，但不适用于这种情况.我需要返回的文本恰好是鼠标选择的结果.例如:

using .filter(':visible').text has been suggested, but it won't work for this scenario. I need the returned text to be EXACTLY what would come from a selection with the mouse. So for example:

$('<div>test1 <p>test2</p>\r\n <b>test3</b> <span style="display:none">none</span></div>').appendTo(document.body).children().filter(':visible').text()

返回

"test2test3"

我真正想要的输出是

test1 test2
 test3

换行符，空格以及所有\ r \ n

linebreaks, whitespace and all, which come from the \r\n

推荐答案

使用.filter(":visible")过滤元素.

或使用此:

$("#test :visible").text();

但是 jQuery文档建议我们改用.filter():

因为:visible是jQuery扩展，不是CSS规范的一部分， 使用:visible的查询不能利用本机DOM querySelectorAll()方法提供的性能提升.为了在使用:visible选择元素时达到最佳性能，请首先使用纯CSS选择器选择元素，然后使用.filter(":visible").

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

这篇关于需要jQuery text()函数来忽略隐藏的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！