Ciclo su querySelectorAll Matches - Trucchi CSS

Diamo un'occhiata ad alcune opzioni per l'iterazione su un NodeList, quando torni dall'esecuzione di un file document.querySelectorAll.

Abbiamo scritto un articolo aggiornato su questo: Un mucchio di opzioni per il ciclo su querySelectorAll NodeLists.

Non tutti i browser supportano Ognuno su NodeLists, ma per quelli che lo fanno:

buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));

Ecco un modo complicato per aggirare questo problema con un supporto del browser un po 'più approfondito.

var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));

Giusto avvertimento, Todd Motto spiega perché questo metodo è piuttosto hacky, descrivendo in dettaglio oltre 10 problemi con esso.

Puoi anche usare un classico ciclo for:

var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )

Il suggerimento di Todd è di creare il tuo metodo:

// 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! ));

Puoi anche diffondere l'elenco da solo, il che ti darebbe accesso ad altri metodi di array mentre ci sei.

(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));

Ci sono anche per ... di loop. Firefox è stato il primo a supportarlo, ma il supporto è diventato piuttosto buono:

for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )

Questo è piuttosto intenso (probabilmente pericoloso e non consigliato) ma potresti fare in modo che NodeList abbia la stessa funzione forEach di Array, quindi usalo.

NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))

Ci sono un po 'più di informazioni nell'articolo MDN.