jQuery each() মেথড কীভাবে কাজ করে

jQuery each() DOM এলিমেন্টগুলো 넘는 ইটারেট করার একটি সংক্ষিপ্ত উপায়। each() মেথড টার্গেট jQuery অবজেক্টে কল করার জন্য ডিজাইন করা হয়েছে। একটি jQuery অবজেক্ট হলো একটি অবজেক্ট যেটি এক বা একাধিক DOM এলিমেন্ট ধারণ করে এবং jQuery মেথডগুলোর অ্যাক্সেস রাখে। each() শুধু এরর-প্রোন নন, এটি একাধিক DOM এলিমেন্ট ম্যানিপুলেট করা সহজ করে দেয়।

jQuery each() একটি কলব্যাক ফাংশন আশ্রয় করে - একটি ফাংশন যা অন্য ফাংশনে পাস করা হয় যা পরে এক্সিকিউট হবে। কলব্যাক ফাংশনের ভেতরে এলিমেন্টের ইন্ডেক্স নম্বর এবং এলিমেন্টটিই অ্যাক্সেসIBLE থাকে। কলব্যাক ফাংশন সম্পর্কে আরও কম্প্রيهেনসিভ রিভিউ এখানে পাওয়া যাবে।

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

jQuery each() কী?

jQuery each হলো jQuery লাইব্রেরির একটি লুপ মেথড। এটি JavaScript লুপের মতো কাজ করে DOM এলিমেন্টগুলো 넘는 ইটারেট করে। jQuery each() একটি কলব্যাক ফাংশন আশ্রয় করে, এবং কলব্যাক ফাংশনের ভেতরে DOM এলিমেন্টগুলো ম্যানিপুলেট করা যায়।

কলব্যাক ফাংশনের বডির ভেতরে থাকাকালীন, কন্ডিশনাল স্টেটমেন্ট ব্যবহার করা যায় কিছু সিলেক্ট করা এলিমেন্টগুলো পরিবর্তন করার জন্য। কন্ডিশনাল স্টেটমেন্ট হলো JavaScript-এ if...then স্টেটমেন্ট। এটি এলিমেন্টগুলো কীভাবে পরিবর্তন হবে সেটি নিয়ন্ত্রণ করার গভীর লেভেল দেয়।

jQuery each() সিনট্যাক্স

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

Value আর্গুমেন্ট করেন্ট এলিমেন্টকে রেফার করে। এটি লক্ষ্য করুন যে value-র সাথে একটি মেথড চেইন করতে হলে value-কে একটি 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 ও করেন্ট এলিমেন্টকে রেফার করে যেটি আগে value ভেরিয়েবল রেফার করত। লক্ষ্য করুন যে আপনি 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>গুলো সিলেক্ট করে, আমরা Red, Purple, এবং Blue টেক্সট লগ করি। লক্ষ্য করুন কীভাবে আমরা value-কে একটি নতুন 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>গুলোকে ব্লু কালার অ্যাসাইন করেছি। আমরা একটু ফ্যান্সি হতে পারি এবং একটি কন্ডিশনাল স্টেটমেন্ট ব্যবহার করে শুধু তিনটির দুটিকে গ্রিন কালারে পরিবর্তন করতে পারি।

$('.colorSelect').each(function() { if ($(this).text() !== "Purple") { $(this).toggleClass('green') } })

আমরা আমাদের ক্লাস সিলেক্টরের সাথে মিলে যাওয়া <div>গুলোতে each() কল করেছি। তারপর আমরা একটি কন্ডিশনাল স্টেটমেন্ট ব্যবহার করেছি প্রতিটি সিলেক্ট করা এলিমেন্ট চেক করতে যেন এর টেক্সট প্রপার্টি "Purple" কিনা। কন্ডিশনাল স্টেটমেন্টের বডিতে, আমাদের this-এর আরেকটি ইনস্ট্যান্স আছে।

কন্ডিশনাল স্টেটমেন্টের বডিতে এই this কী রেফার করছে সেটি হলো সেসব টেক্সট অ্যাট্রিবিউট যেগুলো কন্ডিশন স্যাটিসফাই করে। আমাদের আউটপুটের ভিত্তিতে, আমরা জানি কন্ডিশনালের বডিতে this "Red" এবং "Blue" টেক্সট অ্যাট্রিবিউটকে রেফার করছিল।

যেহেতু "Red" এবং "Blue" "Purple"-এর সমান নয়, আমরা jQuery toggleClass মেথড ব্যবহার করেছি ওরিজিনাল ক্লাসকে green ক্লাসে পরিবর্তন করতে। jQuery toggleClass() সম্পর্কে আরও জানতে, আমি এই আর্টিকেল পড়তে রিকমেন্ড করছি।

উপসংহার

এই গাইডে আমরা অনেক জমিন কভার করেছি। প্রথমে, আমরা শিখলাম যে jQuery each() যেকোনো অন্যান্য JavaScript ইটেরেটরের মতো কাজ করে, শুধু jQuery অবজেক্টের জন্য। তারপর আমরা কিছু সিনট্যাক্স বেস্ট প্র্যাকটিস এবং অ্যারো ফাংশন এবং ট্রেডিশনাল ফাংশন নোটেশন লেখার কিছু পটেনশিয়াল প্রব্লেম কভার করেছি।

আমাদের উদাহরণগুলতে, আমরা দেখেছি অ্যারো ফাংশনগুলোর কতটুকু উপকারিতা আছে, কিন্তু সীমাবদ্ধ। এখানে একটি রিমাইন্ডার: নিজেকে হেডএক থেকে বাঁচাতে jQuery কলব্যাকগুলোর সবসময় ট্রেডিশনাল ফাংশন্যাল নোটেশন ব্যবহার করুন।

তারপর আমরা কিছু মজা করেছি এবং টেক্সট অ্যাট্রিবিউটের কালার পরিবর্তন করেছি। each() লুপের বডিতে একটি কন্ডিশনাল স্টেটমেন্ট ব্যবহার করে, আমরা দেখেছি কীভাবে আমরা শুধু সেসব এলিমেন্ট সিলেক্ট এবং পরিবর্তন করতে পারি যেগুলো আমাদের কন্ডিশন স্যাটিসফাই করে।

এখন, আপনার নতুন শিখা jQuery লুপিং প্যাটার্ন প্র্যাক্টিস করার পালা। ছোট থেকে শুরু করুন তারপর বিল্ড আপ করুন দেখতে jQuery each() কতটুকু ক্যাপেবল।