0

此脚本的目的是动态创建元素的克隆，然后使用 JS 对象中包含的数据填充这些克隆。我的目标是从服务器返回解析后的 JSON，并调用此函数来克隆 DOM 中的元素，并使用来自服务器的数据填充这些克隆。我想要这样做的原因是完全消除了从显式编写的 JS 字符串中动态创建 html 元素，例如：

var HTMLelementAsJSstring = "<article></article>";

我希望通过读取包含元素与解析的 JSON（作为 JS 对象）属性的关系的对象（eTreeObj）来动态创建这些元素。

这是我的 JS（使用 jQuery）

var jso = {
"Result": [
    {
        "Title": "HQWE",
        "Details": "sdfsdf"
    },
    {
        "Title": "WQasdaE",
        "Details": "asdadas"
    }
    ]
};


function dynECreatefromJSO(Oproperty, parentE, childE, eTree) {
    for (i = 0; i <= Oproperty.length; i++) {

        if (i != 0) {
            var TargetE = Eclone.appendTo(parentE);
        } else {
            var TargetE = $(childE),
                Eclone = TargetE.clone();
        }

        for (q = 0; q <= eTree.length; q++) {
            TargetE.children(eTree[q].Element).html(Oproperty[i][eTree[q].JSOproperty]);
        }
        alert("DOESN'T REACH HERE");

    }
}

var eTreeObj = [ {
        "Element": "header",
        "JSOproperty": "Title"
        }, 
        {
        "Element": "article",
        "JSOproperty": "Details"
        }
    ];

dynECreatefromJSO(jso.Result, "div#main", "section.thiselement", eTreeObj);​

还有我的 HTML：

<div id="main"></div>

<section class="thiselement">
    <header></header>
    <article></article>
</section>​

当我访问 for 循环内的 eTree 对象中的属性时，我遇到的问题发生了，其中我的递增变量是“q”。该函数中断，并且无法再次使用递增变量“i”运行循环。

如果我删除此 for 循环中的操作，一切正常。我无法弄清楚为什么会这样：

http://jsfiddle.net/KKv22/2/

4

1 回答 1

2

You have to change your loop like this,

for (i = 0; i < Oproperty.length; i++) {

    if (i != 0) {
        var TargetE = Eclone.appendTo(parentE);
    } else {
        var TargetE = $(childE),
            Eclone = TargetE.clone();
    }

    for (q = 0; q < eTree.length; q++) {
        TargetE.children(eTree[q].Element).html(Oproperty[i][eTree[q].JSOproperty]);
    }
    alert("DOESN'T REACH HERE");

}

This is because array index starts with 0(zero) So, it will contain items only upto length-1 index.

于 2012-05-31T07:59:37.213 回答