Завъртане над querySelectorAll съвпадения - CSS-трикове

Нека разгледаме някои опции за итерация над a NodeList, когато се върнете от стартирането на a document.querySelectorAll.

Написахме актуализирана статия за това: Куп опции за циклиране над querySelectorAll NodeLists.

Не всички браузъри поддържат всеки в NodeLists, но за тези, които го правят:

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

Ето един труден начин да го заобиколите с малко по-дълбока поддръжка на браузъра.

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

Честно предупреждение, Тод Мото обяснява защо този метод е доста хакерски, описвайки над 10 проблема с него.

Можете също така да използвате класически цикъл for:

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

Предложението на Тод е да направите свой собствен метод:

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

Можете също така да разпространите списъка сами, което след това ще ви даде достъп до други методи на масив, докато сте в него.

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

Има и за ... на цикли. Firefox беше първият, който подкрепи това, но поддръжката стана доста добра:

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

Това е доста интензивно (вероятно опасно и не се препоръчва), но можете да накарате NodeList да има същата функция forEach като Array, след което да го използвате.

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

В статията на MDN има малко повече информация.