jQuery each() DOM एलिमेंट्स पर पुनरावृति करने का एक संक्षिप्त तरीका है। Each() मेथड को टारगेट jQuery ऑब्जेक्ट पर कॉल करने के लिए डिज़ाइन किया गया है। एक jQuery ऑब्जेक्ट एक ऑब्जेक्ट है जिसमें एक या अधिक DOM एलिमेंट्स होते हैं और इसमें jQuery मेथड्स तक पहुंच होती है। न केवल each() त्रुटियों की संभावना कम होती है, यह कई DOM एलिमेंट्स में हेरफेर को सरल बनाता है।
jQuery each() को एक कॉलबैक फंक्शन की आवश्यकता होती है - एक फंक्शन जिसे दूसरे फंक्शन में पास किया जाता है जिसे बाद में निष्पादित किया जाएगा। कॉलबैक फंक्शन के अंदर एलिमेंट का इंडेक्स नंबर और एलिमेंट स्वयं तक पहुंच होती है। कॉलबैक फंक्शन्स की अधिक व्यापक समीक्षा यहां पाई जा सकती है।
each() का अनुप्रयोग किसी भी JavaScript लूप की तरह सीधा है, लेकिन कुछ संभावित भ्रम के स्थान हैं। हम इन बिंदुओं को स्पष्ट करेंगे साथ ही सिंटैक्स को देखेंगे। इस गाइड के अंत में jQuery each() को लागू करने के विभिन्न तरीकों को देखने के लिए चरण-दर-चरण कोड उदाहरण होंगे।
jQuery each() क्या है?
jQuery each jQuery लाइब्रेरी के लिए एक लूप मेथड है। यह DOM एलिमेंट्स पर पुनरावृति करके JavaScript लूप की तरह काम करता है। jQuery each() को एक कॉलबैक फंक्शन की आवश्यकता होती है, और कॉलबैक फंक्शन के अंदर वह जगह है जहां DOM एलिमेंट्स में हेरफेर किया जा सकता है।
कॉलबैक फंक्शन के शरीर के अंदर रहते हुए, कंडीशनल स्टेटमेंट्स का उपयोग चयनित कुछ एलिमेंट्स को बदलने के लिए किया जा सकता है। कंडीशनल स्टेटमेंट्स JavaScript में if...then स्टेटमेंट्स हैं। यह इस पर गहरा स्तर का नियंत्रण प्रदान करता है कि वास्तव में एलिमेंट्स कैसे बदले जाते हैं।
jQuery each() सिंटैक्स
jQuery each को दो तरीकों से आमंत्रित किया जा सकता है। पहला, चयनित एलिमेंट पर कॉल किए गए मेथड के रूप में। कॉलबैक फंक्शन दो वैकल्पिक आर्गुमेंट्स तक स्वीकार करता है: इंडेक्स और वैल्यू। इंडेक्स वर्तमान एलिमेंट का इंडेक्स नंबर है। यदि वर्तमान एलिमेंट सूची में पहला था, तो इंडेक्स नंबर 0 लौटाएगा।
वैल्यू आर्गुमेंट वर्तमान एलिमेंट को संदर्भित करता है। यह ध्यान रखना महत्वपूर्ण है कि वैल्यू को jQuery सिलेक्टर में लपेटकर वैल्यू पर मेथड चेन करने की आवश्यकता होती है। आइए इस सब को कुछ अमूर्त कोड में डालते हैं ताकि हम सिंटैक्स को तोड़ सकें।
$('div').each((index, value) => { console.log(`${index}: ${$(value).text()}`) })
यहां, हम पेज पर प्रत्येक <div> को चुन रहे हैं और इसके माध्यम से लूप कर रहे हैं। प्रत्येक पुनरावृति पर, हमारे पास वर्तमान एलिमेंट की इंडेक्स पोजीशन और वैल्यू तक पहुंच होती है। केवल $(value) लौटाने से हमें भयानक [object Object] मान मिलता है।
याद रखें कि [object Object] एक ऑब्जेक्ट का स्ट्रिंग प्रतिनिधित्व है। इसका मतलब है कि हमें उस सटीक मान को निकालने के लिए एक मेथड कॉल करने की आवश्यकता है जो हम चाहते हैं। उपरोक्त मामले में, हम ऑब्जेक्ट के टेक्स्ट एट्रिब्यूट को प्रकट करने के लिए text() मेथड का उपयोग कर रहे हैं। [object Object] के बारे में अधिक पढ़ें ताकि वास्तव में क्या लौटाया जा रहा है इसका अंदाजा लगाया जा सके।
उपरोक्त उदाहरण प्रत्येक <div> के लिए इंडेक्स नंबर और टेक्स्ट एट्रिब्यूट को लॉग करेगा। यदि हमें इंडेक्स तक पहुंच की आवश्यकता नहीं थी, तो हम कोड को इस तरह रीफैक्टर कर सकते हैं:
$('div').each(function() { alert($(this).text()) })
इसे इस तरह लिखने से वर्तमान <div> एलिमेंट का टेक्स्ट भी लॉग होता है। इस कॉलबैक फंक्शन के स्कोप में, कीवर्ड this उस एलिमेंट को भी संदर्भित करता है जिसे पहले वैल्यू वेरिएबल द्वारा संदर्भित किया गया था। ध्यान दें कि आप एरो फंक्शन में कीवर्ड this तक नहीं पहुंच सकते।
हालांकि एरो फंक्शन्स फंक्शन लिखने का एक कॉम्पैक्ट विकल्प हैं, यह कीवर्ड this से बंधा नहीं है। दूसरे शब्दों में, एरो फंक्शन में this का उपयोग करके लौटाया गया ऑब्जेक्ट वह नहीं है जो फंक्शनल नोटेशन में लिखे जाने पर this द्वारा लौटाया जाता है।
यह गाइड एरो फंक्शन्स के अंदर और बाहर को कवर करता है।
jQuery each() उदाहरण
आइए उपरोक्त सिंटैक्स उदाहरणों पर विस्तार करें और कुछ एट्रिब्यूट्स जोड़ें। हम विभिन्न क्लासेस से संबंधित रंगों की सूची के बुनियादी HTML रेंडरिंग से शुरू करते हैं।
<div class="colorSelect">Red</div> <div>Pink</div> <div class="color">Orange</div> <div class="colorSelect">Purple</div> <div class="colorSelect">Blue</div>
यह DOM में प्रत्येक टेक्स्ट एलिमेंट को रेंडर करता है। पहले, आइए एरो फंक्शन्स और पारंपरिक फंक्शन दोनों का उपयोग करके कंसोल में टेक्स्ट को लॉग करके शुरू करते हैं।
$('.colorSelect').each((index, value) => { console.log($(value).text()) })
केवल colorSelect क्लास नाम वाले <div>s को चुनकर, हम Red, Purple, और Blue टेक्स्ट को लॉग करते हैं। ध्यान दें कि हम वैल्यू को एक नए jQuery इंस्टेंस में लपेटकर jQuery text() मेथड को कॉल कर रहे हैं। ऐसा करने से केवल चयनित <div> एलिमेंट्स का टेक्स्ट लौटाता है।
आइए वही परिणाम लौटाते हैं, लेकिन कीवर्ड this का उपयोग करके।
$('.colorSelect').each(function() { console.log($(this).text()) })
हम कॉलबैक के रूप में एक अनाम फंक्शन का उपयोग कर सकते हैं - एक फंक्शन बिना नाम के। फिर से, यह Red, Purple, और Blue टेक्स्ट लौटाता है। यह उल्लेखनीय है कि हालांकि एरो फंक्शन्स का jQuery में कुछ कार्यक्षमता है, jQuery कॉलबैक्स के लिए पारंपरिक फंक्शनल नोटेशन का उपयोग करना सर्वोत्तम अभ्यास है।
अब हम जानते हैं कि एलिमेंट्स के संग्रह पर पुनरावृति कैसे करनी है। अब, आइए कुछ मज़ा करते हैं और रंग बदलते हैं!
<div class="colorSelect">Red</div> <div>Pink</div> <div class="color">Orange</div> <div class="colorSelect">Purple</div> <div class="colorSelect">Blue</div> <div class='result'> </div> <style> .colorSelect { color: blue; } .green { color: green; } </style>
कलर लिस्ट पेज के साथ जारी रखते हुए, अब हमने <style> एलिमेंट में कुछ क्लासेस जोड़ी हैं।
इस उदाहरण में, हमने colorSelect क्लास वाले <div>s को नीला रंग असाइन किया है। हम थोड़ा फैंसी हो सकते हैं और कंडीशनल स्टेटमेंट का उपयोग करके तीन में से केवल दो को हरे रंग में बदल सकते हैं।
$('.colorSelect').each(function() { if ($(this).text() !== "Purple") { $(this).toggleClass('green') } })
हमने अपने क्लास सिलेक्टर से मेल खाने वाले <div>s पर each() कॉल किया। फिर हमने प्रत्येक चयनित एलिमेंट की जांच करने के लिए कंडीशनल स्टेटमेंट का उपयोग किया कि क्या टेक्स्ट प्रॉपर्टी "Purple" थी। कंडीशनल स्टेटमेंट के शरीर में, हमारे पास this का एक और इंस्टेंस है।
कंडीशनल स्टेटमेंट के शरीर में यह उन टेक्स्ट एट्रिब्यूट्स को संदर्भित कर रहा है जो शर्त को पूरा करते हैं। हमारे आउटपुट के आधार पर, हम जानते हैं कि कंडीशनल के शरीर में this "Red" और "Blue" टेक्स्ट एट्रिब्यूट्स को संदर्भित करता था।
चूंकि "Red" और "Blue" "Purple" के बराबर नहीं हैं, हमने मूल क्लास को green क्लास में बदलने के लिए jQuery toggleClass मेथड का उपयोग किया। jQuery toggleClass() के बारे में अधिक जानने के लिए, मैं इस लेख को पढ़ने की सलाह देता हूं।
निष्कर्ष
हमने इस गाइड में बहुत कुछ कवर किया। सबसे पहले, हमने सीखा कि jQuery each() किसी भी अन्य JavaScript इटरेटर्स की तरह काम करता है, बस jQuery ऑब्जेक्ट्स के लिए। फिर हमने कुछ सिंटैक्स सर्वोत्तम प्रथाओं और एरो फंक्शन्स और पारंपरिक फंक्शन नोटेशन लिखने में कुछ संभावित समस्याओं को कवर किया।
हमारे उदाहरणों में, हमने देखा कि एरो फंक्शन्स उपयोगी हैं, लेकिन सीमित हैं। सभी jQuery कॉलबैक्स के लिए पारंपरिक फंक्शनल नोटेशन का उपयोग करने और खुद को सिरदर्द से बचाने के लिए यहां एक रिमाइंडर है।
फिर हमने टेक्स्ट एट्रिब्यूट्स के रंग बदलकर कुछ मज़ा किया। each() लूप के शरीर में कंडीशनल स्टेटमेंट का उपयोग करके, हमने देखा कि हम केवल उन एलिमेंट्स को कैसे चुन और बदल सकते हैं जो हमारी शर्त को पूरा करते हैं।
अब, आप पर निर्भर है कि आप अपने नए jQuery लूपिंग पैटर्न का अभ्यास करें। छोटे से शुरू करें फिर यह देखने के लिए निर्माण करें कि jQuery each() क्या करने में सक्षम है।
