ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery または非 jQuery アプローチを使用して、要素のすべての子孫テキスト ノードを効率的に取得するにはどうすればよいですか?

jQuery または非 jQuery アプローチを使用して、要素のすべての子孫テキスト ノードを効率的に取得するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-17 19:41:11
オリジナル
877 人が閲覧しました

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 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート