jQuery में each मेथड के साथ काम करना

जब हमारे पास jQuery का उपयोग करके प्राप्त तत्वों का एक समूह होता है, तो हम उनमें केवल सभी तत्वों के लिए एक साथ परिवर्तन ही कर सकते हैं।

उदाहरण के लिए, यदि हम पाए गए सभी पैराग्राफ का टेक्स्ट बदलना चाहते हैं - तो हम इसे अलग-अलग नहीं बना पाएंगे।

इस मामले में एक विशेष विधि each हमारी मदद करेगी, जो jQuery सेट के सभी तत्वों के लिए किसी फ़ंक्शन को लागू करने की अनुमति देती है। इस फ़ंक्शन के अंदर हम तत्वों को अलग कर सकते हैं और उनमें से प्रत्येक के साथ अलग-अलग व्यवहार कर सकते हैं।

वास्तव में each एक लूप है, जिसकी मदद से सभी पाए गए तत्वों को पार किया जा सकता है। उस तत्व का लिंक, जिससे लूप अभी गुजर रहा है, this में होगा।

हम इस this का उपयोग सीधे शुद्ध JavaScript में कर सकते हैं, जैसे हमने पहले किया था, उदाहरण के लिए, इस तरह - this.innerHTML - और हमारे तत्वों की आंतरिक सामग्री प्रदर्शित कर सकते हैं। लेकिन बेहतर है कि this को jQuery के डॉलर में इस तरह लपेटें - $(this) - इस मामले में हम इस पर jQuery के सभी तरीकों और चेन को लागू कर सकेंगे।

आइए निम्नलिखित HTML कोड देखें:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

इस उदाहरण में हमें क्लास www वाले सभी तत्व प्राप्त करने होंगे और उनकी सामग्री स्क्रीन पर प्रदर्शित करनी होगी। यह कैसे किया जाता है: $('.www') का उपयोग करके हमें हमारे आवश्यक तत्व मिलते हैं, फिर each(test) की मदद से हम प्रत्येक प्राप्त तत्व पर फ़ंक्शन test लागू करते हैं। यह पहले पहले पैराग्राफ पर लागू होगी, फिर दूसरे पर, तीसरे पर और इसी तरह आगे।

फ़ंक्शन के अंदर this उस तत्व की ओर इशारा करेगा, जिस पर फ़ंक्शन test लागू हो रही है - पहले यह पहला तत्व होगा, फिर दूसरा, और इसी तरह आगे। $(this) जैसे कंस्ट्रक्शन की मदद से हम सामान्य this के बजाय JavaScript से jQuery तत्व प्राप्त करेंगे और उस पर html मेथड लागू करेंगे, जो हमारे तत्व का टेक्स्ट प्राप्त करेगा। खैर, फिर इसे बस स्क्रीन पर प्रदर्शित कर दिया जाएगा:

/*
	फ़ंक्शन का नाम test बिना उद्धरण चिह्नों और () के लिखते हैं,
	क्योंकि हमें इसका कोड चाहिए, न कि परिणाम:
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

इस कार्य को हल करने के लिए अनाम फ़ंक्शन (anonymous functions) भी इस्तेमाल किए जा सकते हैं - ऐसा अक्सर किया जाता है:

$('.www').each(function() {
	alert($(this).html());
});

हम each मेथड को पैरामीटर के साथ कॉलबैक फ़ंक्शन (callback function) भी पास कर सकते हैं।

आइए अगले उदाहरण में पृष्ठ पर सभी li के अंत में उनका क्रम संख्या जोड़ें। अब हम अपने अनाम फ़ंक्शन में तत्व की संख्या और स्वयं तत्व को पास करेंगे:

$('li').each(function (index, elem) {
	$(elem).append(index);
});

और अब elem के बजाय this का उपयोग करते हैं:

$('li').each(function (index) {
	$(this).append(index);
});

सभी li की सामग्री को उनकी क्रम संख्या में बदलें।