迭代页面中的每个文本元素？

我正在尝试在jQuery中编写一个脚本，它将遍历页面中的每个文本元素。 然后我需要逐个改变每个字母的颜色。 例如，对于这样的页面：

Some text and some link and something else 

我想得到：

 "Some text and " "some link" " and " "something else" 

并且能够为每个单独的字母设置样式（即，无论我的风格如何，都可以放回DOM中）。

我知道text()方法，但由于它结合了文本内容，因此无法完成工作，而我需要访问每个单独的文本部分。

有关如何做到这一点的任何建议？

Answer 1

1. 遍历所有子元素，以递归方式遍历元素。
   将所有文本节点存储在列表中。
2. 遍历所有文本节点：
   1. 循环遍历每个元素的文本内容。
      1. 将每个字母包裹在元素中
      2. 在DocumentFragment插入此元素
   2. 用此片段替换文本节点。

演示： http ： //jsfiddle.net/B2uRn/

 // jQuery plugin, example: (function($) { $.fn.styleTextNodes = function() { return this.each(function() { styleTextNodes(this); }); }; })(jQuery) function styleTextNodes(element) { var span = document.createElement('span'); span.className = 'shiny-letter'; // Recursively walk through the childs, and push text nodes in the list var text_nodes = []; (function recursiveWalk(node) { if (node) { node = node.firstChild; while (node != null) { if (node.nodeType == 3) { // Text node, do something, eg: text_nodes.push(node); } else if (node.nodeType == 1) { recursiveWalk(node); } node = node.nextSibling; } } })(element); // innerText for old IE versions. var textContent = 'textContent' in element ? 'textContent' : 'innerText'; for (var i=text_nodes.length-1; i>=0; i--) { var dummy = document.createDocumentFragment() , node = text_nodes[i] , text = node[textContent], tmp; for (var j=0; j