1

コードをもう少し再利用できるようにしようとしています。

現在使用しているもの：

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である必要があります。

ありがとう ：）

4

1 に答える 1

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です。

于 2012-06-05T18:22:02.010 に答える