infinito ciclo for che non è attento alla condizione di array-lunghezza esempio

HTMLinfinito ciclo for che non è attento alla condizione di array-lunghezza esempio

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

E il mio JavaScript sembra

var monkey = document.getElementsByTagName("img"); 
var paragraph = document.getElementById('thisPar'); 
paragraph.innerHTML += '<img src="' + monkey[0].src +'" width="200">';

che funziona perfettamente bene.

Tuttavia quando l'ho messo in un ciclo che sembra

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

Esso stampa un ciclo infinito di tutte le mie foto scimmia. Immagino che facendo dipendere la condizione dal numero di elementi nell'array "monkey" (o dal numero di tag img sulla pagina), sarei in grado di stampare quella quantità di immagini nel paragrafo "thisPar" id.

Perché questa dichiarazione crea un ciclo infinito?

fonte

2014-04-23 beckah

Ogni volta che si aggiunge un elemento con 'innerHTML', la lunghezza di 'monkey.length' aumenta ... quindi continua all'infinito. Come suggerito da ** Notulysses ** crea una variabile fissa per la lunghezza che non verrà modificata con l'aggiunta a 'innerHTML'. Un altro modo per scriverlo è 'for (var i = 0, len = monkey.length; i erosman

Quando si definisce la lunghezza all'esterno del ciclo For, ha funzionato correttamente.

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

}

fonte

2014-04-23 17:33:17 beckah

funziona solo se viene inserita la nuova img dopo la serie originale di immagini: definire una variabile e assegnarlo alla vostra proprietà monkey lunghezza fuori del ciclo per renderlo fisso:

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

fonte

2014-04-23 17:29:58 potashin

Hah. In realtà ho appena provato e funziona perfettamente. – beckah

@Notulyss: funziona solo se il nuovo 'img' è inserito * dopo * il set originale di immagini. La collezione è ancora in vita. –

@ Bur Burland: Grazie, ho aggiornato il mio post. – potashin

document.getElementsByTagName restituisce un dal vivo HTMLCollection. Poiché stai aggiungendo altri tag img, stai estendendo la raccolta di un elemento per ciclo attraverso il ciclo.

Se aggiungi un console.log(monkey.length) all'interno del tuo loop, vedrai il problema.

La soluzione migliore sarebbe quella di fare questo:

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

Invece di getElementsByTagName. querySelectorAll restituirà un elenco statico.

Ecco un violino che ti mostrerà la lunghezza di monkey.length per ciascun ciclo. Ho fatto una conferma in modo da poter uscire facendo clic su Annulla:

http://jsfiddle.net/K266Q/

Ed ecco la versione fissa con querySelectorAll:

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

Copiare la lunghezza fuori del ciclo funziona anche, ma solo fino a quando gli articoli rimangono nello stesso ordine. Ecco il motivo per cui semplicemente copiando la lunghezza può prendere fuori:

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

Avviso perché in questo caso sto inserendo la nuova immagine al inizio anziché alla fine, io alla fine a copiare la stessa immagine per 3 volte.

fonte

2014-04-23 17:32:44

Credo che la vostra lunghezza scimmia cresce di una unità ogni ciclo perché si sta creando un nuovo tag img ogni loop che aggiunge uno alla lunghezza della scimmia

fonte

2014-04-23 17:35:01

infinito ciclo for che non è attento alla condizione di array-lunghezza esempio

risposta

Problemi correlati