Question

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

它打印了我所有猴子图片的无限循环。我想通过使条件取决于数组“ monkey ”中的元素数量（或页面上img标签的数量），我将能够在''中打印那些数量的图片 thisPar '段落ID。

为什么这句话会产生无限循环？

Answer 1

document.getElementsByTagName会返回直播 HTMLCollection。由于您要添加更多img标记，因此每个循环都会将集合扩展一个元素。

如果在循环中添加console.log(monkey.length)，则会看到问题。

最好的解决方案是：

var monkey = document.querySelectorAll("img");

而不是getElementsByTagName。 querySelectorAll将返回静态列表。

这是一个小提琴，可以显示每个周期monkey.length的长度。我做了一个确认，所以你可以通过点击取消来突破：

http://jsfiddle.net/K266Q/

这是使用querySelectorAll的固定版本：

http://jsfiddle.net/K266Q/1/

复制循环外部的长度也有效，但只要项目保持相同的顺序。这就是为什么简单地复制长度会让你感到高兴：

http://jsfiddle.net/K266Q/2/

请注意，因为在这种情况下我会在开头而不是结尾处插入新图像，我最终会将同一图像复制3次。

Answer 2

仅在原始图像集之后插入新img时才有效：定义变量并将其分配给循环外的monkey长度属性以使其固定：

var monkeyLength = monkey.length;
for(var i = 0; i < monkeyLength; i++){
   paragraph.innerHTML += '<img src="' + monkey[i].src +'" width="200">';
}

Answer 3

在For循环外定义长度时，它工作正常。

var LENGTH = img.length;
for(var i=0; i < LENGTH; i++){
    monkeyPara.innerHTML += '<img src="' + img[i].src + '" height="42" width="42">';

}

Answer 4

我认为你的猴子长度每个循环增加一个因为你正在为每个循环创建一个新的img标签，它会为猴子的长度增加一个

无限For循环，不关注数组长度条件

4 个答案: