Iteration (für) seltsam in JS arbeiten

Ich habe ein scheinbar dummes Problem, aber da ich nicht sehr JavaScript kann, brauche ich etwas Hilfe.Iteration (für) seltsam in JS arbeiten

Ich versuche nur, durch ein Array zu iterieren, aber es scheint Elemente ohne Grund überspringt. Meine Funktion ist wirklich einfach:

function uncolour(classname) 
{ 
    var anchors = document.getElementsByClassName(classname); 
    for(var i = 0; i < anchors.length; i++) { 
     var anchor = anchors[i]; 
     anchor.classList.toggle("nocolor"); 
    } 
}

Das Problem ist, dass es konsequent ein Element überspringt. Es funktioniert für das erste Element, dann für das dritte und so weiter. Ich habe überprüft und alle die richtigen Elemente sind in der Anker-Array vorhanden, aber es schaltet die Klasse nur auf die geraden Indizes. Irgendeine Idee warum? Ich bin hier ratlos.

BEARBEITEN: Vielen Dank für Ihre Antworten. Ich habe den anderen ähnlichen Beitrag gelesen, aber der Fall mit mir ist, dass das Umschalten der "nocolor" -Klasse die Elemente des Arrays nicht beeinflussen sollte, weil der Klassenname, nach dem ich suche, nicht mit "nocolor" identisch ist. Ich denke, dass die Elemente zwar gleich bleiben, aber irgendwie neu angehängt werden, weil ich die Klasse eines Elements im Dokument geändert habe. Also, ich weiß nicht, warum, aber das war für mich: for(var i = anchors.length-1; i>=0; i--)

Quelle

2016-12-12 user2980149

Können Sie reproduzieren das Problem mit der Code-Snipped-Funktion von SO? –

Vermutlich seit ein Mann eine Live-Elementsammlung verändert. – Lain

Das ist eine Live-HTML-Sammlung, kehren Sie die Schleife um und beginnen Sie am Ende. 'für (var i = anchors.length-1; i> = 0; i--) {' oder 'while (anchors.length) {anchors [0] .classList.toggle (" nocolor "); } ' – epascarello

Hier ist, was Sie tun können:

<html> 
    <head> 
     <script> 
      window.onload = function(){ 
       //This gets all anchors.test.. for now 
       var anchors = document.getElementsByClassName('test'); 
       for(var i=0; i < anchors.length; i++){ 
        var anchor = anchors[i]; 

        /* 
         As soon as the class test gets removed, the anchors list is updated and the .length of it adjusted. 
         This leads to the mentioned behavior of each second element being skipped 

         Turn one: a, b, c, d, e, f 
         Turn two: b, c, d, e, f 
         Turn three: b, d, e, f 
         .. As much as i is increaded the length is decreased 
        */ 
        anchor.classList.toggle('test'); 
        anchor.style.color = 'red' 
       } 
      } 
     </script> 
    </head> 

    <body> 
     <a class = 'test'>a</a><a class = 'test'>b</a><a class = 'test'>c</a><a class = 'test'>d</a><a class = 'test'>e</a><a class = 'test'>f</a> 
    </body> 
</html>

Hier ist, was Sie tun sollten:

<html> 
    <head> 
     <script> 
      window.onload = function(){ 
       //This gets all anchors.test.. for now 
       var anchors = document.getElementsByClassName('test'); 

       //Instead from counting up.. it gets counted down which makes the removed element irrelevant 
       for(var i=anchors.length-1; i>=0; i--){ 
        var anchor = anchors[i]; 
        anchor.classList.toggle('test'); 
        anchor.style.color = 'orange' 
       } 
      } 
     </script> 
    </head> 

    <body> 
     <a class = 'test'>a</a><a class = 'test'>b</a><a class = 'test'>c</a><a class = 'test'>d</a><a class = 'test'>e</a><a class = 'test'>f</a> 
    </body> 
</html>

Quelle

2016-12-12 12:44:10 Lain

Iteration (für) seltsam in JS arbeiten

Antwort

Verwandte Themen