Nieskończona pętla for, która nie jest zwrócenie uwagi na stan tablica długości Przykład

htmlNieskończona pętla for, która nie jest zwrócenie uwagi na stan tablica długości Przykład

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

A moja JavaScript wygląda jak

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

który działa perfekcyjnie.

jednak kiedy umieścić go w pętlę, która wygląda

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

Drukuje nieskończoną pętlę wszystkich moich zdjęć małpy. Myślę, że uzależniając warunek od liczby elementów w tablicy "małpa" (lub liczby znaczników img na stronie), będę w stanie wydrukować taką liczbę zdjęć w akapicie "thisPar" ID.

Dlaczego to stwierdzenie tworzy nieskończoną pętlę?

Źródło

2014-04-23 beckah

każdym razem, gdy dodać element z 'innerHTML', długość 'monkey.length' rośnie ... więc trwa to zawsze. Zgodnie z sugestią ** Notulysses ** utwórz stałą zmienną dla długości, która nie zostanie zmieniona poprzez dodanie do 'innerHTML'. Innym sposobem na zapisanie go jest 'for (var i = 0, len = monkey.length; i erosman

Podczas definiowania długości poza pętlą For działało dobrze.

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

}

Źródło

2014-04-23 17:33:17 beckah

Działa tylko wtedy, gdy nowy img dodaje się po oryginalnego zestawu obrazów: zdefiniować zmienną i przypisać go do swojego mienia monkey długości poza pętlą, aby to naprawić:

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

Źródło

2014-04-23 17:29:58 potashin

Hah. Właśnie to wypróbowałem i działa idealnie. – beckah

@Nululki: działa tylko wtedy, gdy nowe 'img' jest wstawiane * po * oryginalnym zestawie obrazów. Kolekcja jest nadal dostępna. –

@Matt Burland: Dziękuję, zaktualizowałeś mój wpis. – potashin

document.getElementsByTagName zwraca żywo HTMLCollection. Ponieważ dodajesz więcej znaczników img, powiększasz kolekcję o jeden element, każdy cykl w pętli.

Jeśli dodasz console.log(monkey.length) w pętli, zobaczysz problem.

Najlepszym rozwiązaniem byłoby, aby to zrobić:

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

Zamiast getElementsByTagName. querySelectorAll zwróci listę statyczną.

Oto skrzypce, które pokaże długość monkey.length w każdym cyklu. Zrobiłem to potwierdzić, dzięki czemu można wyrwać klikając anulować:

http://jsfiddle.net/K266Q/

i tu jest wersja ustalona przy użyciu querySelectorAll:

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

Kopiowanie długości poza pętla działa również, ale tylko tak długo, jak przedmioty pozostają w tej samej kolejności. Oto dlaczego po prostu kopiując długość może złapać cię:

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

Wskazówka ponieważ w tym przypadku jestem wkładając nowy obraz na początku zamiast na końcu, ja skończyć skopiowanie tego samego obrazu 3 razy.

Źródło

2014-04-23 17:32:44

myślę, że długość małpa rośnie o jeden każdej pętli bo tworzysz nowy tag img każdej pętli, który dodaje jeden na długość małpy

Źródło

2014-04-23 17:35:01

Nieskończona pętla for, która nie jest zwrócenie uwagi na stan tablica długości Przykład

Odpowiedz

Powiązane problemy