jQuery-তে each মেথড নিয়ে কাজ

যখন আমাদের কাছে jQuery ব্যবহার করে পাওয়া উপাদানগুলির একটি দল থাকে, তখন আমরা সেগুলিতে পরিবর্তন শুধুমাত্র সমস্ত উপাদানের জন্য একসাথে করতে পারি।

উদাহরণস্বরূপ, যদি আমরা খুঁজে পাওয়া সমস্ত অনুচ্ছেদের লেখা পরিবর্তন করতে চাই - আমাদের পক্ষে এটিকে ভিন্ন ভিন্ন করা সম্ভব হবে না।

এই ক্ষেত্রে আমাদের সাহায্য করবে একটি বিশেষ মেথড each, যা jQuery সেটের সমস্ত উপাদানের জন্য একটি ফাংশন প্রয়োগ করতে দেয়। এই ফাংশনের ভিতরে আমরা উপাদানগুলিকে আলাদা করতে এবং তাদের প্রত্যেকটির সাথে আলাদাভাবে আচরণ করতে সক্ষম হব।

মূলত each একটি লুপ, যার সাহায্যে পাওয়া সমস্ত উপাদান ঘুরে দেখা যায়। যে উপাদানটির উপর লুপটি currently চলছে তার লিঙ্কটি 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 ফাংশনও ব্যবহার করা যেতে পারে - এটি সাধারণত বেশি করা হয়:

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

আমরা each মেথডটিকে প্যারামিটার সহ callback ফাংশনও পাঠাতে পারি।

আসুন পরের উদাহরণে পৃষ্ঠার সমস্ত li-এর শেষে তাদের ক্রমিক নম্বর যোগ করি। এখন আমাদের Anonymous ফাংশনে আমরা উপাদানের নম্বর এবং নিজেই উপাদানটি পাঠাব:

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

এবং এখন elem-এর পরিবর্তে ব্যবহার করি this:

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

সমস্ত li-এর বিষয়বস্তু তাদের ক্রমিক নম্বর দিয়ে পরিবর্তন করুন।