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>​

私が抱えている問題は、増分変数が「q」であるforループ内のeTreeオブジェクト内のプロパティにアクセスするときに発生します。関数は中断し、増分変数「i」を使用してループを再度実行することはできません。

このforループ内の操作を削除すると、すべてが正常に機能します。これがなぜなのか理解できません：

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

4

1 に答える 1

2

このようにループを変更する必要があります、

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のインデックスまでのアイテムのみが含まれます。

于 2012-05-31T07:59:37.213 に答える