In meiner JSFiddle versuche ich einfach, über ein Array von Elementen zu iterieren. Das Array ist nicht leer, wie die Protokollanweisungen belegen. Der Aufruf von forEach
gibt mir jedoch den (nicht so hilfreichen) Fehler "Nicht gefangen TypeError
: undefined
ist keine Funktion".
Ich muss etwas Dummes tun; Was mache ich falsch?
Mein Code:
var arr = document.getElementsByClassName('myClass');
console.log(arr);
console.log(arr[0]);
arr.forEach(function(v, i, a) {
console.log(v);
});
.myClass {
background-color: #FF0000;
}
<div class="myClass">Hello</div>
javascript
foreach
Jer
quelle
quelle
arr
ist kein Array, sondern einHTMLCollection
. Es hat nicht die gleichen Methoden wie ein Array. developer.mozilla.org/en-US/docs/Web/API/… . Hier ist sogar ein SO-Beitrag darüber: stackoverflow.com/questions/13433799/…[1,2,3].forEach(function(v,i,a) { console.log(v); });
ist in Ordnung. Was ist der Unterschied zwischen diesem und dem Array in meinem Beispiel?arr instanceof Array
dazu führen wirdfalse
, können keine Prototypmethoden desArray
Objekts wie Array.prototype.forEach () verwendet werden .arr
ist eine HTMLCollection und ein Array-ähnliches Objekt (erbt jedoch nicht von oder instanziiert nichtArray
). Daherfor
funktioniert Ihre Standardschleife so, dass sie einfach den Index des Objekts durchläuft und kein Prototyp von istArray
.Antworten:
Dies liegt daran , dass
document.getElementsByClassName
eine HTMLCollection zurückgegeben wird , kein Array.Glücklicherweise handelt es sich um ein "Array-ähnliches" Objekt (was erklärt, warum es protokolliert wird, als wäre es ein Objekt, und warum Sie mit einer Standardschleife iterieren können
for
). Sie können dies also tun:Mit ES6 (in modernen Browsern oder mit Babel) können Sie auch
Array.from
Arrays aus Array-ähnlichen Objekten erstellen:oder verteilen Sie das Array-ähnliche Objekt in einem Array:
quelle
arguments
ist einer. jQuery-Objekte sind andere. Sie könnten selbst eine machen:var a = {"0": "str1", "1": "str2", length: 2}
querySelectorAll('.myClass')
sollte aber funktionieren. Ich warte immer noch darauf, dass Iteratoren zur NodeList-API hinzugefügt werden. :-(Array.prototype.forEach
wollen, können Sie das nicht tun. Wenn Sie diese Anforderung später haben, verwenden Sie die Standardschleifefor
oder wenn Sie das Array-Objekt verwenden möchten, verwenden SieArray.prototype.every
oderArray.prototype.some
(beachten Sie jedoch, dass nicht alle in IE8 oder weniger unterstützt werden)splice
in dieser Definition , aber wenn ich mehr „Array-like“ sein will , nutzen zu könnenmap
,filter
und so weiter, dann schließe ich es. Einfache Iteration mitforEach
nicht erforderlichsplice
.Versuchen Sie dies, es sollte funktionieren:
quelle
Für den Fall, dass Sie auf die ID jedes Elements einer bestimmten Klasse zugreifen möchten, können Sie Folgendes tun:
quelle