遍历页面中的每个文本元素? [英] Iterating through each text element in a page?

问题描述

我正在尝试用 jQuery 编写一个脚本，该脚本将遍历页面内的每个文本元素.然后我需要一个一个地改变每个字母的颜色.例如，对于这样的页面:

I'm trying to write a script in jQuery that would iterate through each text element inside a page. Then I need to change the color of each letter one by one. For example, for a page such as this one:

<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).

and be able to style each individual letter (i.e. put back into the DOM whatever I styled).

我知道 text() 方法，但这不会完成这项工作，因为它结合了文本内容，而我需要访问每个单独的文本部分.

I know about the text() method but that won't do the job since it combines the text contents, while I need to access each individual text part.

有什么关于如何做到这一点的建议吗?

Any suggestion on how to do that?

推荐答案

1. 循环遍历所有子元素，递归查找元素.
   将所有文本节点存储在一个列表中.
2. 遍历所有文本节点:

1. Loop through all child elements, recursively for elements.
   Store all text nodes in a list.
2. Loop through all text nodes:

1. 遍历每个元素的文本内容.

1. Loop through the textual contents of each element.

1. 将每个字母包裹在 元素中
2. 在DocumentFragment
中插入这个元素

1. Wrap each letter in a <span> element
2. Insert this element in a DocumentFragment

用这个片段替换文本节点.

演示: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<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
    }
}

这篇关于遍历页面中的每个文本元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！