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

jQuery Clone function with callback - not working as expected

本文关键字：工作 函数 回调 jQuery      更新时间：2023-09-26

首先，这里有一个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>​

克隆的代码有问题，但我无法弄清楚是什么。任何建议/帮助真的非常感谢。

试试这个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);
});​
相关文章：