Javascript 不注意数组长度条件的无限For循环_Javascript_Html_Arrays_Dom

Javascript 不注意数组长度条件的无限For循环

javascript html arrays dom

Javascript 不注意数组长度条件的无限For循环,javascript,html,arrays,dom,Javascript,Html,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.

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段落=document.getElementById（'thisPar'）；
段落.innerHTML+=''；

这很好用。

但是当我把它放在一个看起来像

var monkey=document.getElementsByTagName（“img”）；
var段落=document.getElementById（'thisPar'）；
对于（变量i=0；i


它打印了我所有猴子图片的无限循环。我认为，通过使条件依赖于数组“monkey”（或页面上img标记的数量）中的元素数量，我将能够在“thisPar”段落id中打印该数量的图片
为什么此语句会创建一个无止境的循环？
只有在原始图像集之后插入新的img时才起作用：定义一个变量，并将其分配给循环外的monkey
length属性以使其固定：
var monkeyLength = monkey.length;
for(var i = 0; i < monkeyLength; i++){
   paragraph.innerHTML += '<img src="' + monkey[i].src +'" width="200">';
}

var monkeyLength=monkey.length；
对于（变量i=0；i
返回一个实时HTMLCollection。由于要添加更多的img
标记，因此在循环中每个循环都要扩展集合一个元素
如果在循环中添加console.log（monkey.length）
，就会看到问题
最好的解决方案是这样做：
var monkey = document.querySelectorAll("img");

而不是getElementsByTagName
querySelectorAll
将返回一个静态列表
这里有一把小提琴，可以显示每个周期的monkey.length
长度。我做了确认，因此您可以通过单击“取消”突破：

下面是使用queryselectoral
的固定版本：

在循环外复制长度也可以，但前提是项目保持相同的顺序。这就是为什么简单地复制长度会让您感到困惑的原因：

请注意，因为在本例中，我是在开头而不是结尾插入新图像，所以我最终复制了同一图像3次。
在For循环外部定义长度时，效果很好
var LENGTH = img.length;
for(var i=0; i < LENGTH; i++){
    monkeyPara.innerHTML += '<img src="' + img[i].src + '" height="42" width="42">';

}

var LENGTH=img.LENGTH；
对于（变量i=0；i
我认为你的猴子长度每圈增加一个，因为你在每圈创建一个新的img标签，这会增加猴子的长度。实际上我刚刚试过，效果很好。@notulyses:只有在原始图像集之后插入新的img
时才有效。该集合仍然有效。每次添加带有innerHTML
的元素时，monkey.length
的长度都会增加…因此它将永远持续下去。正如Notulysses所建议的，为长度创建一个固定变量，该变量不会随着添加到innerHTML
而改变。另一种编写方法是for（var i=0，len=monkey.length；i
var LENGTH = img.length;
for(var i=0; i < LENGTH; i++){
    monkeyPara.innerHTML += '<img src="' + img[i].src + '" height="42" width="42">';

}