forEach Rückruf nicht ausgeführt mit getElementsByClassName

Im folgenden Code,forEach Rückruf nicht ausgeführt mit getElementsByClassName

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Hide odd rows</title> 
     <meta charset="UTF-8"> 
    </head> 
    <body> 
     <div style="background-color:#8F9779;width:200px;height:30px;"> 
     </div> 
     <hr style="width:200px" align="left"> 
     <table border="1" > 
      <tr class="hide" > 
       <td width="40" height="20">row 1</td> 
      </tr> 
      <tr> 
       <td width="40" height="20">row 2</td> 
      </tr> 
      <tr class="hide"> 
       <td width="40" height="20">row 3</td> 
      </tr> 
      <tr> 
       <td width="40" height="20">row 4</td> 
      </tr> 
      <tr class="hide"> 
       <td width="40" height="20">row 5</td> 
      </tr> 
     </table><br> 
     <button type="button" name="HideRows">Hide Odd Rows</button> 
     <script type="text/javascript" src="hideOddRows.js"></script> 
    </body> 
</html>

/* hideOddRows.js */ 
document.querySelector('[name=HideRows]').onclick = hideRows; 

function hideRows(){ 
    var elements = document.getElementsByClassName('hide'); 
    elements.forEach(function(element){ 
     element.style.visibility = "hidden"; 
    }); 
    return true; 
}

Per Debugging, Callback-Funktion für jede element von elements Array nicht auf Click-Ereignis ausgeführt wird.

I elements als Schlüssel Sammlung betrachten, wie unten dargestellt ..

Wie dieser Fehler beheben?

Quelle

2015-12-16 overexchange

'Elemente' haben' nodelist' und 'forEach' funktioniert nicht mit' nodelist'. Probieren Sie '[] .forEach.call (elements, function (item) {});' – Rayon

forEach wird in dem Prototyp des arrayartigen HTMLCollection Objekts zurückgegeben durch getElementsByClassName nicht enthalten.

Eine HTMLCollection Instanz Array-like, dass Sie Elemente von Indizes zugreifen können, aber nicht alle Methoden eines Arrays enthalten, wie Sie mit forEach entdeckt haben.

Sie können die Methode für das Objekt jedoch manuell aufrufen, indem Sie auf die Methode vom Array-Prototyp zugreifen.

var elements = document.getElementsByClassName('hide'); 
Array.prototype.forEach.call(elements, function(element){ 
    element.style.visibility = "hidden"; 
});

Quelle

2015-12-16 04:12:49

Was ist die Geschichte von 'Return True'? Du hast es nicht benutzt. Ist es in Callback- und Event-Handlern unbedingt erforderlich, "Return True" zu sagen? Kann ich nicht "Return 1" oder "Return 23" sagen? – overexchange

@overexchange In Ihrem Fall bedeutet dies, dass Sie das Standardverhalten zulassen. Ich habe es von meiner Probe ausgeschlossen, da es nicht direkt mit dem Problem "forEach" zusammenhängt. Weitere Informationen finden Sie in dieser Antwort: http: // stackoverflow.com/a/128966/3155639 –

Die forEach Methode ist für Arrays. Es funktioniert nicht, da .getElementsByClassName() eine HTMLCollection zurückgibt.

, um dies zu umgehen, verwenden:

var elements = document.getElementsByClassName('hide'); 
Array.prototype.forEach.call(elements, function(element){ 
    element.style.visibility = "hidden"; 
});

oder kürzer:

var elements = document.getElementsByClassName('hide'); 
[].forEach.call(elements, function(element){ 
    element.style.visibility = "hidden"; 
});

Quelle

2015-12-16 04:12:36

Ich würde empfehlen, die kürzere Alternative zu vermeiden, da sie eine ungenutzte Array-Instanz erzeugt. –

Sie elements in ein Array umwandeln und dann forEach) (nennen.

var elements = document.getElementsByClassName('hide'); 
elements = Array.prototype.slice.call(elements,0); 
    elements.forEach(function(element){ 
     element.style.visibility = "hidden"; 
    });

Geige: https://jsfiddle.net/assx7hmh/

Quelle

2015-12-16 04:16:33 Ramanlfc

Base auf Ihren Code, hier ist meine Lösung:

function hideRows(){ 
 
    var elements = document.getElementsByClassName('hide'); 
 
    for(var key in elements) { 
 
    if(elements.hasOwnProperty(key)) 
 
     elements[key].style.visibility = "hidden"; 
 
    } 
 
    return true; 
 
}

Sie haben soeben eine Schleife durch Objekt benötigen, weil forEach nur Array akzeptieren.

Quelle

2015-12-16 04:38:55 omgpwned

Siehe [Warum ist "für ... in" mit Array-Iteration eine so schlechte Idee?] (http://stackoverflow.com/q/500504/1529630) – Oriol

Aber mit 'for..in 'fügt eine zusätzliche Überprüfung der Aufzählbarkeit hinzu. – overexchange

oops ... danke Jungs! Ich lese es. – omgpwned

forEach Rückruf nicht ausgeführt mit getElementsByClassName

Antwort

Verwandte Themen