javascript - 带有回调的 jQuery 克隆函数 - 未按预期工作

Question

首先，这是我工作的 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>​

克隆的代码有问题，但我不知道是什么。非常感谢任何建议/帮助。

Answer 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);
});​