मूल प्रश्न के जवाब में, आप for/in
गलत तरीके से उपयोग कर रहे हैं । आपके कोड में, key
इंडेक्स है। इसलिए, छद्म-सरणी से मान प्राप्त करने के लिए, आपको करना होगा list[key]
और आईडी प्राप्त करना होगा, आप करेंगे list[key].id
। लेकिन, आपको for/in
पहली बार में ऐसा नहीं करना चाहिए ।
सारांश (दिसंबर 2018 में जोड़ा गया)
कभी भी for/in
एक नोडलिस्ट या HTMLCollection पुनरावृति करने के लिए उपयोग न करें । इससे बचने के कारणों का वर्णन नीचे किया गया है।
आधुनिक ब्राउज़रों के सभी हाल के संस्करण (सफारी, फ़ायरफ़ॉक्स, क्रोम, एज) सभी for/of
डोम सूची पर पुनरावृत्ति का समर्थन करते हैं जैसे nodeList
या HTMLCollection
।
यहाँ एक उदाहरण है:
var list = document.getElementsByClassName("events");
for (let item of list) {
console.log(item.id);
}
पुराने ब्राउज़रों को शामिल करने के लिए (IE जैसी चीजों सहित), यह हर जगह काम करेगा:
var list= document.getElementsByClassName("events");
for (var i = 0; i < list.length; i++) {
console.log(list[i].id); //second console output
}
आप का उपयोग क्यों नहीं करना चाहिए के लिए स्पष्टीकरण for/in
for/in
किसी वस्तु के गुणों को पुनरावृत्त करने के लिए है। इसका मतलब है कि यह किसी वस्तु के सभी चलने योग्य गुणों को वापस कर देगा। हालांकि यह किसी सरणी (रिटर्न ऐरे एलिमेंट्स या छद्म-एरे तत्व) के लिए काम करता दिखाई दे सकता है, यह ऑब्जेक्ट के अन्य गुणों को भी लौटा सकता है जो कि आप नहीं हैं, जो एरे-जैसे तत्वों से उम्मीद कर रहे हैं। और, अनुमान करें कि क्या, HTMLCollection
या nodeList
वस्तु दोनों में अन्य गुण हो सकते हैं जो for/in
पुनरावृत्ति के साथ वापस आ जाएंगे । मैंने अभी इसे क्रोम में आज़माया है और इसे जिस तरह से आप इसे पुनरावृत्त कर रहे हैं, उसे सूची में आइटम पुनः प्राप्त करेंगे (अनुक्रमित 0, 1, 2, आदि ...), लेकिन यह भी गुणों length
और item
गुणों को पुनः प्राप्त करेगा । for/in
यात्रा बस एक HTMLCollection के लिए काम नहीं करेगा।
देखें http://jsfiddle.net/jfriend00/FzZ2H/ कारण है कि आप के साथ एक HTMLCollection पुनरावृति नहीं कर सकता के लिएfor/in
।
फ़ायरफ़ॉक्स में, आपका for/in
पुनरावृत्ति इन वस्तुओं को लौटाएगा (ऑब्जेक्ट के सभी चलने योग्य गुण):
0
1
2
item
namedItem
@@iterator
length
उम्मीद है, अब आप देख सकते हैं कि आप for (var i = 0; i < list.length; i++)
इसके बजाय इसका उपयोग क्यों करना चाहते हैं ताकि आप इसे प्राप्त कर सकें 0
, 1
और 2
आपकी यात्रा में।
नीचे इस बात का विवरण दिया गया है कि 2015-2018 की समयावधि में ब्राउज़र कैसे विकसित हुए हैं और आपको पुनरावृति के अतिरिक्त तरीके प्रदान कर रहे हैं। इनमें से किसी को भी अब आधुनिक ब्राउज़रों की आवश्यकता नहीं है क्योंकि आप ऊपर वर्णित विकल्पों का उपयोग कर सकते हैं।
2015 में ईएस 6 के लिए अपडेट
ES6 में जोड़ा गया है Array.from()
जो एक सरणी जैसी संरचना को वास्तविक सरणी में बदल देगा। इस तरह से किसी को सीधे सूची की गणना करने की अनुमति मिलती है:
"use strict";
Array.from(document.getElementsByClassName("events")).forEach(function(item) {
console.log(item.id);
});
अप्रैल 2016 तक वर्किंग डेमो (फ़ायरफ़ॉक्स, क्रोम और एज में): https://jsfiddle.net/jfriend00/8ar4xn2s/
2016 में ईएस 6 के लिए अपडेट
अब आप अपने कोड में इसे जोड़कर NodeList
और इसके साथ निर्माण के लिए ES6 का उपयोग कर सकते हैं HTMLCollection
:
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
फिर, आप कर सकते हैं:
var list = document.getElementsByClassName("events");
for (var item of list) {
console.log(item.id);
}
यह क्रोम, फ़ायरफ़ॉक्स और एज के वर्तमान संस्करण में काम करता है। यह काम करता है क्योंकि यह NodeList और HTMLCollection प्रोटोटाइप दोनों के लिए एरेयर इटरेटर को संलग्न करता है ताकि जब / पुनरावृत्तियों के लिए उन्हें पुनरावृति करने के लिए एरे इटरेटर का उपयोग करें।
कार्य डेमो: http://jsfiddle.net/jfriend00/joy06u4e/ ।
दिसंबर 2016 में ES6 के लिए दूसरा अपडेट
दिसंबर 2016 तक, Symbol.iterator
समर्थन को Chrome v54 और फ़ायरफ़ॉक्स v50 में बनाया गया है , इसलिए नीचे दिया गया कोड अपने आप काम करता है। यह अभी एज के लिए बिल्ट-इन नहीं है।
var list = document.getElementsByClassName("events");
for (let item of list) {
console.log(item.id);
}
वर्किंग डेमो (क्रोम और फ़ायरफ़ॉक्स में): http://jsfiddle.net/jfriend00/3ddpz8sp/
दिसंबर 2017 में ES6 के लिए तीसरा अपडेट
दिसम्बर 2017 के रूप में, एक के लिए एज 41.16299.15.0 में यह क्षमता काम करता है nodeList
के रूप में document.querySelectorAll()
नहीं, बल्कि एक HTMLCollection
के रूप में document.getElementsByClassName()
तो आप मैन्युअल रूप से इटरेटर एक के लिए एज में इसका इस्तेमाल करने के आवंटित करने के लिए HTMLCollection
। यह एक कुल रहस्य है कि वे एक संग्रह प्रकार को क्यों ठीक करेंगे, लेकिन दूसरे को नहीं। लेकिन, आप कम से कम document.querySelectorAll()
ES6 के परिणाम का उपयोग कर सकते हैंfor/of
एज के वर्तमान संस्करणों में सिंटैक्स हैं।
मैंने उपरोक्त jsFiddle को भी अपडेट किया है इसलिए यह दोनों का परीक्षण करता है HTMLCollection
औरnodeList
अलग-अलग आउटपुट को jsFiddle में ही कैप्चर करता है।
मार्च 2018 में ES6 के लिए चौथा अपडेट
मेसकिएब के अनुसार, Symbol.iterator
सफारी में समर्थन का निर्माण किया गया है, इसलिए आप या for (let item of list)
तो उपयोग कर सकते हैंdocument.getElementsByClassName()
document.querySelectorAll()
।
अप्रैल 2018 में ES6 के लिए पांचवां अपडेट
जाहिर है, एक HTMLCollection
साथ iterating के लिए समर्थन करते हैंfor/of
2018 में फॉल 18 में आ जाएगा।
नवंबर 2018 में ईएस 6 के लिए छठा अपडेट
मैं इस बात की पुष्टि कर सकता हूं कि Microsoft Edge v18 (जो कि 2018 के विंडोज अपडेट में शामिल है) के साथ, अब आप एक HTMLCollection और NodeList दोनों को एज में / a के साथ जोड़ सकते हैं।
इसलिए, अब सभी आधुनिक ब्राउज़रों में for/of
HTMLCollection और NodeList दोनों वस्तुओं के पुनरावृत्ति के लिए देशी समर्थन शामिल है ।