1

複数レベルの配列を持つことができるオブジェクトを反復処理しようとしています。

例えば。

私はから始めます：

var htmlString = {
    "div": [{
        "attributes": {
            "class": "myDivClass"
        },
        "p": [{
            "attributes": {
                "class": "myPClass"
            }
        }]
    }]
};

次に何かを追加しましょう。

var htmlString = {
    "div": [{
        "attributes": {
            "class": "myDivClass"
        },
        "p": [{
            "attributes": {
                "class": "myPClass"
            },
            "span": [{
                "attributes": {
                    "class": "mySpanClass"
                }
            }]
        }]
    }]
};

私が取り組んでいるコードは、次のような形になります。

var childNode = document.createElement("myChildElement");
for (key in value) {
    if (value.hasOwnProperty(key)) {
        if (key == "attributes") {
            childNode.setAttributes(myAttributes); // loop through attributes on the element
        }
        else {
            //the same code ad infinitum
            var childChildNode = document.createElement("myChildChildElement");
            // etc etc....
        }
    }
}
parentNode.appendChild(childNode);

各余分な要素のルールは同じなので、両方のコードに対して同じ方法でこのデータ構造をループダウンできるはずです。方法はわかりませんが、while()どこかにループします。誰でも教えてもらえますか？

PS ネイティブの JavaScript を使用してください。jQuery は使用しないでください。(ただし、YUI3 の回答があれば、非常に興味があります)。

4

2 に答える 2

2 
var createTree = function (node, data) {
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            if (key == "attributes") {
                node.setAttributes(myAttributes); // loop through attributes on the element
            }
            else {
                for (var i = 0; i < data[key].length; ++i) {
                    var childNode = document.createElement(key);
                    createTree(childNode, data[key][i]);
                    node.appendChild(childNode);
                }
            }
        }
    }
}

createTree(parentNode, htmlString);
于 2012-08-01T17:37:10.383 に答える
0

さて、Qnan のコードは、ブランチの最後に到達することを適切に処理していなかったため、少し調整する必要がありました。最後に到達すると、チェックするものは何もなく、何もない null の長さがエラーを引き起こしていました。

私はそれが悪い習慣であることを知っていますが、それは遅いです.これを修正する必要があるので、ここに私の微調整があります.

var createTree = function (node, data) {
    for (key in data) {
        if (data.hasOwnProperty(key)) {
            if (key == "attributes") {
                node.setAttributes(myAttributes); // loop through attributes on the element
            }
            else {
                try {
                    for (var i = 0; i < data[key].length; ++i) {
                        var childNode = document.createElement(key);
                        createTree(childNode, data[key][i]);
                        node.appendChild(childNode);
                    }
                }
                catch(error) {
                    console.log("there was an error");
                }
            }
        }
    }
}

createTree(parentNode, htmlString);

はい、そうです、エラーを試行/キャッチして埋めます...そして何もしません。家の子供たちでこれを試さないでください！

Qnanさん、どうもありがとう。

于 2012-08-03T23:05:23.360 に答える