कैसे jQuery प्रत्येक () काम करता है

jQuery each() DOM तत्वों पर पुनरावृति करने का एक संक्षिप्त तरीका है। each() विधि को लक्ष्य jQuery ऑब्जेक्ट पर कॉल करने के लिए डिज़ाइन किया गया है। एक jQuery ऑब्जेक्ट एक ऑब्जेक्ट है जिसमें एक या अधिक DOM तत्व होते हैं और jQuery विधियों तक पहुंच होती है। इतना ही नहीं each() . है त्रुटियों के लिए कम प्रवण, यह कई DOM तत्वों में हेरफेर को सरल करता है।

jQuery each() कॉलबैक फ़ंक्शन की आवश्यकता होती है - एक फ़ंक्शन दूसरे फ़ंक्शन को पास किया जाता है जिसे बाद में निष्पादित किया जाएगा। कॉलबैक फ़ंक्शन के अंदर तत्व और तत्व की अनुक्रमणिका संख्या तक पहुंच है। कॉलबैक फ़ंक्शंस की अधिक व्यापक समीक्षा यहां पाई जा सकती है।

each() . का अनुप्रयोग किसी भी जावास्क्रिप्ट लूप की तरह सीधा है, लेकिन संभावित भ्रम के लिए कुछ स्थान हैं। हम वाक्य रचना के साथ-साथ इन बिंदुओं को भी स्पष्ट करेंगे। इस गाइड के अंत में jQuery each() को लागू करने के विभिन्न तरीकों को देखने के लिए चरण-दर-चरण कोड उदाहरण होंगे। ।

jQuery प्रत्येक क्या है ()?

jQuery प्रत्येक jQuery लाइब्रेरी के लिए एक लूप विधि है। यह DOM तत्वों पर पुनरावृति करके जावास्क्रिप्ट लूप की तरह काम करता है। jQuery each() कॉलबैक फ़ंक्शन की आवश्यकता होती है, और कॉलबैक फ़ंक्शन के अंदर वह जगह होती है जहां DOM तत्वों में हेरफेर किया जा सकता है।

कॉलबैक फ़ंक्शन के शरीर के अंदर, कुछ चयनित तत्वों को बदलने के लिए सशर्त विवरणों का उपयोग किया जा सकता है। सशर्त बयान हैं अगर … तो जावास्क्रिप्ट में बयान। यह नियंत्रण का एक गहरा स्तर प्रदान करता है कि वास्तव में तत्वों को कैसे बदला जाता है।

jQuery प्रत्येक() सिंटेक्स

jQuery प्रत्येक को दो तरीकों से लागू किया जा सकता है। सबसे पहले, चयनित तत्व पर बुलाए गए विधि के रूप में। कॉलबैक फ़ंक्शन दो वैकल्पिक तर्कों को स्वीकार करता है:अनुक्रमणिका और मान। अनुक्रमणिका वर्तमान तत्व की अनुक्रमणिका संख्या है। यदि वर्तमान तत्व सूची में पहला था, तो सूचकांक संख्या 0 वापस आ जाएगी।

मान तर्क वर्तमान तत्व को संदर्भित करता है। यह ध्यान रखना महत्वपूर्ण है कि किसी विधि को मान के लिए श्रृंखलाबद्ध करने के लिए jQuery चयनकर्ता में रैपिंग मान की आवश्यकता होती है। आइए इस सब को कुछ अमूर्त कोड में डालें ताकि हम सिंटैक्स को तोड़ सकें।

$('div').each((index, value) => { console.log(`${index}:${$(value).text()}`)})

यहां, हम पेज पर प्रत्येक

$('div').each(function() { अलर्ट($(this).text ())})

लाल
गुलाबी
नारंगी
बैंगनी
 
नीला

$('.colorSelect').each((index, value) => { कंसोल.लॉग($(value).text ())})

$('.colorSelect').each(function() { console.log($(this).text ())})

लाल
गुलाबी
नारंगी
बैंगनी
 
नीला