1

まず、ここに私の作品の JSfiddle があります: http://jsfiddle.net/xzGxR/

JavaScript:

function dataClonePrototype(JSOtarget, ElementPrototype, callback) {
    for (i = 0; i < JSOtarget.length; i++) {
        var TargetElement;
        if (!Eclone) { // Only create it on first interval
            TargetElement = $(ElementPrototype);
            var Eclone = TargetElement.clone(); // We only want to create a copy of this clone...
        } else {
            TargetElement = Eclone.clone().insertAfter(ElementPrototype);
        }
        callback(TargetElement, JSOtarget[i]);
    }
}

var returnedJSO = 
{
    "Animals": [
        {
            "Title": "Dogs",
            "Amount": 300
        },
        {
            "Title": "Pigs",
            "Amount": 230
        },
        {
            "Title": "Cats",
            "Amount": 340
        }
    ]
}

dataClonePrototype(returnedJSO.Animals, "section#animals", function(Element, JSOtargetAtKey) {
    Element.children("header").html(JSOtargetAtKey.Title);
    Element.children("article").html(JSOtargetAtKey.Amount);
});​

そしてHTML：

<section id="animals">
     <header></header>
     <article></article>
</section>​

出力は (視覚的に) 次のようになります。

Dogs
300
Pigs
230
Cats
340

とはいえ、こんな感じ。

Dogs
300
Cats
340
Pigs
230
Cats
340

これの目的は、HTML を使用してそのクローンを作成し、これらのクローンに JavaScript オブジェクトからのデータを入力することです。次のように入力する必要があります。

<section id="animals">
   <header>Dogs</header>
   <article>300</article>
</section>​

クローンを作成するコードに何か問題がありますが、何が原因かわかりません。アドバイス/ヘルプをいただければ幸いです。

4

1 に答える 1

1

このjsFiddleを試してください

function dataClonePrototype(JSOtarget, ElementPrototype, callback) {

    $TargetElement = $(ElementPrototype);
    for (i = 0; i < JSOtarget.length; i++) {

        var $Eclone = $TargetElement.clone(); // We only want to create a copy of this clone...

        callback($Eclone, JSOtarget[i], $TargetElement);
    }
}


dataClonePrototype(returnedJSO.Animals, "section#animals", function($Element, JSOtargetAtKey, $Prototype) {
    $Element.children("header").html(JSOtargetAtKey.Title);
    $Element.children("article").html(JSOtargetAtKey.Amount)
        $Element.insertAfter($Prototype);
});​
于 2012-06-01T23:04:15.320 に答える