使用jQuery从包裹的集合中收集所有文本节点,用空格分隔 [英] Using jQuery to gather all text nodes from a wrapped set, separated by spaces
问题描述
我正在寻找一种在jQuery包装集合中收集所有文本的方法,但是我需要在它们之间没有文本节点的兄弟节点之间创建空格。
例如,考虑这个HTML:
< div>
< ul>
< li>列表项#1< / li>< li>列表项#2< / li>< li>列表项#3< / li>
< / ul>
< / div>
如果我只是使用jQuery的 text()
收集< div>
的文本内容的方法,如下所示:
var $ div = $('div'),text = $ div.text()。trim();
alert(文字);
产生以下文本:
列表项目#1.列表项目#2.列表项目#3。
因为没有空格在每个< li>
元素之间。我正在寻找的是(注意每个句子之间的单个空格):
列表项目#1。列出项目#3。列出项目#3。
这表明我需要遍历包装集中的DOM节点,为每个文本添加文本到一个字符串,然后是一个空格。我尝试了以下代码:
var $ div = $('div'),text =''
$ div.find('*')。each(function(){
text + = $(this).text()。trim()+'';
});
alert(文字);
但这产生了以下文本:
这是列表项#1。这是列表项#2。这是列表项#3。这是列表项#1。这是列表项#2。这是列表项#3。
我假设这是因为我正在遍历每个后代的< div>
并附加文本,所以我得到< ul>
中的文本节点,并且每个< li> / code>孩子,导致重复的文本。
我想我可能会找到/编写一个简单的JavaScript函数来递归地遍历包装集的DOM,收集和附加文本节点 - 但是使用jQuery有更简单的方法吗?
jQuery主要处理元素,其文本节点的权力相对较弱。您可以获取所有具有 contents()
的所有孩子的列表,但是您仍然必须使用它检查类型,所以与使用纯DOM 的childNodes
。没有方法递归地获取文本节点,所以你必须自己写一些东西,例如。如下所示:
function collectTextNodes(element,texts){
for(var child = element.firstChild; child! == null; child = child.nextSibling){
if(child.nodeType === 3)
texts.push(child);
else if(child.nodeType === 1)
collectTextNodes(child,texts);
}
}
函数getTextWithSpaces(element){
var texts = [];
collectTextNodes(element,texts);
for(var i = texts.length; i - > 0;)
texts [i] = texts [i] .data;
return texts.join('');
}
I'm looking for a way to gather all of the text in a jQuery wrapped set, but I need to create spaces between sibling nodes that have no text nodes between them.
For example, consider this HTML:
<div>
<ul>
<li>List item #1.</li><li>List item #2.</li><li>List item #3.</li>
</ul>
</div>
If I simply use jQuery's text()
method to gather the text content of the <div>
, like such:
var $div = $('div'), text = $div.text().trim();
alert(text);
that produces the following text:
List item #1.List item #2.List item #3.
because there is no whitespace between each <li>
element. What I'm actually looking for is this (note the single space between each sentence):
List item #1. List item #3. List item #3.
This suggest to me that I need to traverse the DOM nodes in the wrapped set, appending the text for each to a string, followed by a space. I tried the following code:
var $div = $('div'), text = '';
$div.find('*').each(function() {
text += $(this).text().trim() + ' ';
});
alert(text);
but this produced the following text:
This is list item #1.This is list item #2.This is list item #3. This is list item #1. This is list item #2. This is list item #3.
I assume this is because I'm iterating through every descendant of <div>
and appending the text, so I'm getting the text nodes within both <ul>
and each of its <li>
children, leading to duplicated text.
I think I could probably find/write a plain JavaScript function to recursively walk the DOM of the wrapped set, gathering and appending text nodes - but is there a simpler way to do this using jQuery? Cross-browser consistency is very important.
Thanks for any help!
jQuery deals mostly with elements, its text-node powers are relatively weak. You can get a list of all children with contents()
, but you'd still have to walk it checking types, so that's really no different from just using plain DOM childNodes
. There is no method to recursively get text nodes so you would have to write something yourself, eg. something like:
function collectTextNodes(element, texts) {
for (var child= element.firstChild; child!==null; child= child.nextSibling) {
if (child.nodeType===3)
texts.push(child);
else if (child.nodeType===1)
collectTextNodes(child, texts);
}
}
function getTextWithSpaces(element) {
var texts= [];
collectTextNodes(element, texts);
for (var i= texts.length; i-->0;)
texts[i]= texts[i].data;
return texts.join(' ');
}
这篇关于使用jQuery从包裹的集合中收集所有文本节点,用空格分隔的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!