我正在尝试使我的代码更具可重用性。

目前,我正在使用:

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。

谢谢 :)

最佳答案

我可能会在您的数组上使用documentFragmentforEach

var frag = document.createDocumentFragment();

[ lightbox_overlay,
  lightbox_border,
  lightbox_content ].forEach(function(el) { frag.appendChild(el); });

document.body.insertBefore(frag, top_element);




您可以使用MDN中的修补程序使较旧的浏览器发生变化。


.forEach() patch from 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


.reduce() patch from MDN

关于javascript - javascript通过insertBefore迭代数组,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10902576/

10-12 12:38
查看更多