Question

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

＆＃13;

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";
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

似乎它正确创建了div，但只将每秒图像打包成div。

感谢您的帮助

Answer 1

<强>解释

getElementsByTagName会返回直播 HTMLCollection。直播表示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在1 c。{/ p>

....等等。

这解释了为什么一个图像被包裹而另一个图像没有...

<强>修正：

而不是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);
}

工作小提琴：

＆＃13;

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);
}

＆＃13;

* {
  margin: 0;
  padding: 0;
  font-size: 15px;
}

img {
  max-width: 236px;
}

div {
  padding: 5px;
  border: 5px solid red;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

然后你只需要删除原始图像

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

2 个答案: