लूप ओवर क्वेरीसेलेक्टरऑल मैच - सीएसएस-ट्रिक्स

आइए NodeList, एक से अधिक चलने के लिए कुछ विकल्पों को देखें , जैसे कि आप एक को चलाने से पीछे हट जाते हैं document.querySelectorAll।

हमने इसके बारे में एक अद्यतन लेख लिखा है: A Bunch of Options for Looping Over 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 से अधिक समस्याओं का विवरण है।

आप लूप के लिए एक क्लासिक का उपयोग भी कर सकते हैं:

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

एमडीएन लेख में थोड़ी और जानकारी है।