Лооп Овер куериСелецторАлл Матцхес - ЦСС-трикови

Anonim

Погледајмо неке опције за понављање а NodeList, док се враћате из покретања а document.querySelectorAll.

О овоме смо написали ажурирани чланак: Гомила опција за превлачење преко куериСелецторАлл НодеЛистс.

Не подржавају сви прегледачи форЕацх на НодеЛистс-у, али они који подржавају:

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 проблема с њом.

Такође можете користити класичну фор петљу:

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"); )); ));

Постоје и за ... петље. Фирефок је први то подржао, али подршка је постала прилично добра:

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

Ово је прилично интензивно (вероватно опасно и не препоручује се), али можете учинити да НодеЛист има исту функцију форЕацх као и Арраи, а затим га користите.

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

У чланку МДН је мало више информација.