我正在尝试在jQuery中编写一个脚本来遍历页面中的每个文本元素.然后我需要逐个改变每个字母的颜色.例如,对于这样的页面：
<p>Some text and <a href="http://example.com">some link</a> and <span>something else</span></p>
我想得到：
"Some text and " "some link" " and " "something else"
并且能够为每个单独的字母设置样式(即,无论我的风格如何,都将其放回DOM中).
我知道text()方法,但由于它结合了文本内容,所以不会完成工作,而我需要访问每个单独的文本部分.
有关如何做到这一点的任何建议？
解决方法
>以递归方式遍历所有子元素.
将所有文本节点存储在列表中.
>遍历所有文本节点：
将所有文本节点存储在列表中.
>遍历所有文本节点：
>循环遍历每个元素的文本内容.
>将每个字母包裹在< span>中元件
>在DocumentFragment中插入此元素
>用此片段替换文本节点.
// 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<text.length; j++) {
tmp = span.cloneNode(true); // Create clone from base
tmp[textContent] = text[j]; // Set character
dummy.appendChild(tmp); // append span.
}
node.parentNode.replaceChild(dummy,node); // Replace text node
}
}
