首頁 >web前端 >js教程 >如何使用 jQuery 或非 jQuery 方法有效地檢索元素的所有後代文字節點?

如何使用 jQuery 或非 jQuery 方法有效地檢索元素的所有後代文字節點?

Patricia Arquette
Patricia Arquette原創
2024-12-17 19:41:11885瀏覽

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