我正在尝试使我的代码更具可重用性。
目前我正在使用:
var top_element = document.getElementById('main');
document.body.insertBefore(lightbox_overlay, top_element);
document.body.insertBefore(lightbox_border, lightbox_overlay);
document.body.insertBefore(lightbox_content, lightbox_border);
我想使用数组并遍历项目来执行此操作,但是:
var lightbox_elements = [];
lightbox_elements.push(lightbox_overlay, lightbox_border, lightbox_content);
任何想法接下来的步骤是什么?必须是普通的JS ..
谢谢:)
答案 0 :(得分:3)
我可能会在你的数组上使用documentFragment
和forEach
。
var frag = document.createDocumentFragment();
[ lightbox_overlay,
lightbox_border,
lightbox_content ].forEach(function(el) { frag.appendChild(el); });
document.body.insertBefore(frag, top_element);
您可以使用MDN中的补丁来填充旧浏览器。
这是另一种使用.reduce()
的解决方案。
[ lightbox_overlay,
lightbox_border,
lightbox_content ].reduce(function(prev, curr) {
return document.body.insertBefore(curr, prev);
}, top_element);
由于prev
始终是最后一个返回值(或第一次迭代的种子值),并且由于insertBefore
返回插入的curr
项,对于每次迭代,prev
始终是最后一次curr
。