Question

此脚本的目的是动态创建元素克隆，然后使用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对象内的属性时，我遇到的问题是我的递增变量是＆＃34; q＆＃34;。该函数断开，并且无法使用递增变量运行循环＆＃34; i＆＃34;试。

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

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

Answer 1

你必须像这样改变你的循环，

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");

}

这是因为数组索引从0开始（零）因此，它只包含长度为1的索引。

JS函数在for循环内部循环之后中断

1 个答案: