首页 >web前端 >js教程 >如何使用 jQuery 或非 jQuery 方法有效地检索元素的所有后代文本节点?

如何使用 jQuery 或非 jQuery 方法有效地检索元素的所有后代文本节点?

Patricia Arquette
Patricia Arquette原创
2024-12-17 19:41:11878浏览

How Can I Efficiently Retrieve All Descendant Text Nodes of an Element Using jQuery or a Non-jQuery Approach?

使用 jQuery 检索文本节点

将元素的所有后代文本节点作为 jQuery 集合检索的任务可能会带来挑战。虽然 jQuery 缺乏用于此特定目的的专用函数,但我们可以通过组合 contents()find().

的功能来实现此目标jQuery 方法:

var getTextNodesIn = function(el) {
    return $(el).find(":not(iframe)").addBack().contents().filter(function() {
        return this.nodeType == 3;
    });
};

getTextNodesIn(el);

此方法检索所有后代文本节点,不包括iframes.

非 jQuery 方法:

为了更有效的解决方案,可以采用基于 DOM 的递归函数:

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], nonWhitespaceMatcher = /\S/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}

getTextNodesIn(el);

此函数可以处理非 jQuery 元素,从而更好地控制空白文本节点包含。

以上是如何使用 jQuery 或非 jQuery 方法有效地检索元素的所有后代文本节点?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn