bec*_*kah 5 html javascript arrays dom
HTML示例
<html>
<img src="http://img3.wikia.nocookie.net/__cb20130606164012/animalcrossing/images/3/30/Monkey.jpg" width="200px"><br />
<img src="http://i.telegraph.co.uk/multimedia/archive/02101/monkeys_2101340c.jpg" width="200px"><br />
<img src="http://www.awallpapersonline.com/wp-content/uploads/2014/03/Baby-monkeys-pictures-5-419x400.jpg" width="200px"><br />
<p id="sliderImages"><p>
</html>
我的Javascript看起来像
var monkey = document.getElementsByTagName("img");
var paragraph = document.getElementById('thisPar');
paragraph.innerHTML += '<img src="' + monkey[0].src +'" width="200">';
哪个效果很好.
然而,当我把它放在一个看起来像的循环中时
var monkey = document.getElementsByTagName("img");
var paragraph = document.getElementById('thisPar');
for(var i = 0; i < monkey.length; i++){
paragraph.innerHTML += '<img src="' + monkey[i].src +'" width="200">';
}
它打印出我所有猴子图片的无限循环.我想,通过使条件依赖于数组"的元素个数猴子 "(或在页面上的img标签的数量),我将能够打印在"图片的量thisPar "段落编号.
为什么这个陈述创造了无限循环？
document.getElementsByTagName返回实时 HTMLCollection.由于您要添加更多img标记,因此每个循环通过循环将集合扩展一个元素.
如果你console.log(monkey.length)在循环中添加一个,你会看到问题.
最好的解决方案是:
var monkey = document.querySelectorAll("img");
而不是getElementsByTagName.querySelectorAll将返回静态列表.
这是一个小提琴,将显示monkey.length每个周期的长度.我做了一个确认,所以你可以通过点击取消来突破:
这是固定版本使用querySelectorAll:
复制循环外部的长度也有效,但只要项目保持相同的顺序.这就是为什么简单地复制长度会让你感到惊讶:
请注意,因为在这种情况下我在开头而不是结尾插入新图像,我最终复制相同的图像3次.
当定义 For 循环外部的长度时，它工作得很好。
var LENGTH = img.length;
for(var i=0; i < LENGTH; i++){
monkeyPara.innerHTML += '<img src="' + img[i].src + '" height="42" width="42">';
}