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 的代码需要稍作调整，因为它没有正确处理到达分支末尾的问题。一旦到了最后，就没有什么要检查的了，空值没有任何东西会导致错误。

我知道这是不好的做法，但为时已晚，我需要修复它，所以这是我的调整。

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 回答