将图像包装在 JS 中动态创建的 div 中

debugcn 发表于 Dev

瓦甘托

我很难用 JS 中动态创建的 div 包装我的图像。这是我使用的代码：

var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
    var wrapper = document.createElement("div");
    wrapper.appendChild(images[i]);
    mainpictureframe.appendChild(wrapper);

    wrapper.style.background = "red";
}

* {
    margin: 0;
    padding: 0;
    font-size: 15px;
}
 
img{ 
	max-width:236px;
}

<main id="mainpictureframe"> 
                <img src="http://cdn.wallpapersafari.com/61/30/us7TlD.jpg" alt="Stonehenge1" title="16by9-1"/>
                <img src="http://cdn.wallpapersafari.com/61/30/us7TlD.jpg" alt="Stonehenge2" title="16by9-1"/>
                <img src="http://cdn.wallpapersafari.com/61/30/us7TlD.jpg" alt="Stonehenge3" title="16by9-1"/>
                <img src="http://cdn.wallpapersafari.com/61/30/us7TlD.jpg" alt="Stonehenge4" title="16by9-1"/>
                <img src="http://cdn.wallpapersafari.com/61/30/us7TlD.jpg" alt="Stonehenge5" title="16by9-1"/>

                <img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="otherexample1" title="4by3-1"/>
                <img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="otherexample2" title="4by3-1"/>
                <img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="otherexample3" title="4by3-1"/>
                <img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="otherexample4" title="4by3-1"/>
                <img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="otherexample5" title="4by3-1"/>
</main>

看起来它正确地创建了 div，但只将第二个图像打包到一个 div 中。

谢谢您的帮助

易卜拉欣·马里尔

解释：

getElementsByTagName返回一个实时的 HTMLCollection。Live意味着 HTMLCollection 反映了 DOM。如果某些元素被移除，HTMLCollection 会相应地缩小。

由于您从循环的开头开始循环，因此有些元素会被抛在后面。

如果图像的 HTMLCollection 是：

[a, b, c, d].

然后：

i = 0 and length = 4
a  b  c  d
^
i

然后a从集合中删除并i增加，下一步：

i = 1 and length = 3
b  c  d
   ^
   i

c被移除b并将被跳过，因为b现在在位置0（因为a被移除）并且i在1where cis。

.... 等等。

这就解释了为什么一张图片被包裹而另一张没有......

使固定：

而不是for循环，只需创建一个while循环，检查是否有静止图像：

var images = document.getElementsByTagName("img");
var mainpictureframe = document.getElementById("mainpictureframe");

var len = images.length;
while (len--) {
    var wrapper = document.createElement("div");
    var image = mainpictureframe.removeChild(images[0]);
    wrapper.appendChild(image);
    mainpictureframe.appendChild(wrapper);
}

工作小提琴：

var images = document.getElementsByTagName("img");
var mainpictureframe = document.getElementById("mainpictureframe");

var len = images.length;
while (len--) {
  var wrapper = document.createElement("div");
  var image = mainpictureframe.removeChild(images[0]);
  wrapper.appendChild(image);
  mainpictureframe.appendChild(wrapper);
}

* {
  margin: 0;
  padding: 0;
  font-size: 15px;
}

img {
  max-width: 236px;
}

div {
  padding: 5px;
  border: 5px solid red;
}

<main id="mainpictureframe">
  <img src="http://cdn.wallpapersafari.com/61/30/us7TlD.jpg" alt="Stonehenge1" title="16by9-1" />
  <img src="http://cdn.wallpapersafari.com/61/30/us7TlD.jpg" alt="Stonehenge2" title="16by9-1" />
  <img src="http://cdn.wallpapersafari.com/61/30/us7TlD.jpg" alt="Stonehenge3" title="16by9-1" />
  <img src="http://cdn.wallpapersafari.com/61/30/us7TlD.jpg" alt="Stonehenge4" title="16by9-1" />
  <img src="http://cdn.wallpapersafari.com/61/30/us7TlD.jpg" alt="Stonehenge5" title="16by9-1" />

  <img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="otherexample1" title="4by3-1" />
  <img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="otherexample2" title="4by3-1" />
  <img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="otherexample3" title="4by3-1" />
  <img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="otherexample4" title="4by3-1" />
  <img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="otherexample5" title="4by3-1" />
</main>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。