首先,这是一个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>
克隆的代码有问题,但我无法弄清楚是什么。任何建议/帮助都非常感谢。
答案 0 :(得分: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);
});