Nézzünk meg néhány opciót az a-on történő iteráláshoz NodeList, amint visszatérünk az a futtatásához document.querySelectorAll.
Frissített cikket írtunk erről: Egy csomó lehetőség a lekérdezéshez a querySelectorAll NodeLists használatával.
Nem minden böngésző támogatja a NodeLists forEach-ot, de azok számára, akik támogatják:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Ez egy trükkös módszer a megkerülésre, egy kicsit mélyebb böngésző támogatással.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Igaz figyelmeztetés, Todd Motto elmagyarázza, miért ez a módszer meglehetősen hacker, és több mint 10 problémát részletez.
A hurok klasszikusát is használhatja:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Todd javaslata, hogy készítsen saját módszert:
// forEach method, could be shipped as part of an Object Literal/Module var forEach = function (array, callback, scope) ( for (var i = 0; i < array.length; i++) ( callback.call(scope, i, array(i)); // passes back stuff we need ) ); // Usage: // optionally change the scope as final parameter too, like ECMA5 var myNodeList = document.querySelectorAll('li'); forEach(myNodeList, function (index, value) ( console.log(index, value); // passes index + value back! ));Ön is terjesztheti a listát, amely akkor hozzáférést biztosít más tömb metódusokhoz, amíg benne van.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Vannak… hurkok is. A Firefox elsőként támogatta ezt, de a támogatás elég jó lett:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Ez elég intenzív (valószínűleg veszélyes és nem ajánlott), de megteheti, hogy a NodeList ugyanazzal a forEach funkcióval rendelkezik, mint az Array, majd használhatja.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))Kicsit több információ található az MDN cikkében.