我正在尝试编写一个将数组转换为DocumentFragment的函数。数组的每个项目都将成为HTMLElement。它的标签名将是数组项的类名*,其属性将是值是字符串的数组项的属性。
因此,例如,如果我有以下构造函数:
function Person(name,pets){
this.name=name;
this.pets=pets;
}
function Pet(name){this.name=name;}
而这个数据:
var arr=[
new Person("Bob",[
new Pet("Sparky"),
new Pet("Wishbone")
]),
new Person("Mary",[
new Pet("Maggie"),
new Pet("Sprinkles")
])
];
我使用此功能,效果很好:
Array.prototype.toDocFrag=function(){
return this.reduce(function(docFrag,currentItem){
elem=document.createElement(currentItem.constructor.name.toLowerCase());
for (prop in currentItem){
if (typeof currentItem[prop]==="string") elem.setAttribute(prop,currentItem[prop])
//if (currentItem[prop] instanceof Array) elem.appendChild(currentItem[prop].toDocFrag())
}
docFrag.appendChild(elem)
return docFrag;
},document.createDocumentFragment())
}
如果运行arr.toDocFrag()
,则会得到包含<person name="Bob"></person><person name="Mary"></person>
预期内容的docFrag 。
但是现在我想要做的是使它递归,这样它就可以看到“ pets”并在每个文件上附加另一个DocumentFragment,<person>
所以我最终得到了
<person name="Bob">
<pet name="Sparky"></pet>
<pet name="Wishbone"></pet>
</person>
<person name="Mary">
<pet name="Maggie"></pet>
<pet name="Sprinkles"></pet>
</person>
取消注释我在代码中注释掉的行,我相信它应该起作用。但是,由于某种原因,arr.toDocFrag()
只是返回<pet name="Wishbone"></pet><pet name="Sprinkles"></pet>
我的逻辑有什么问题?我是否对Array.prototype.reduce
递归函数有所误解?
谢谢!
脚注
*通过类名,我的意思是初始化实例的构造函数的名称。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句