কিভাবে 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()}`)})

এখানে, আমরা পৃষ্ঠার প্রতিটি

নির্বাচন করছি এবং এর মধ্য দিয়ে লুপ করছি। প্রতিটি পুনরাবৃত্তিতে, আমরা বর্তমান উপাদানের সূচক অবস্থান এবং মান অ্যাক্সেস করতে পারি। সহজভাবে ফেরত দেওয়া হচ্ছে $(value) আমাদের ভয়ঙ্কর [অবজেক্ট অবজেক্ট] দেয় মান

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

মনে রাখবেন যে [অবজেক্ট অবজেক্ট] একটি বস্তুর একটি স্ট্রিং প্রতিনিধিত্ব. এর মানে আমরা যে সঠিক মানটি চাই তা বের করার জন্য আমাদের একটি পদ্ধতি কল করতে হবে। উপরের ক্ষেত্রে, আমরা text() ব্যবহার করছি বস্তুর পাঠ্য বৈশিষ্ট্য প্রকাশ করার পদ্ধতি। [অবজেক্ট অবজেক্ট] সম্পর্কে আরও পড়ুন ঠিক কি ফেরত দেওয়া হচ্ছে তা বোঝার জন্য।

উপরের উদাহরণটি প্রতিটি

-এর জন্য টেক্সট অ্যাট্রিবিউট অনুসরণ করে ইনডেক্স নম্বর লগ করবে। যদি আমাদের সূচীতে অ্যাক্সেসের প্রয়োজন না হয়, আমরা কোডটিকে এইভাবে রিফ্যাক্টর করতে পারি:

$('div').each(function() { alert($(this).text())})

এইভাবে লিখলে বর্তমান

উপাদানটির পাঠ্যও লগ হয়। এই কলব্যাক ফাংশনের সুযোগে, কীওয়ার্ড this মান পরিবর্তনশীল দ্বারা পূর্বে উল্লেখ করা উপাদানকেও বোঝায়। মনে রাখবেন আপনি এই কীওয়ার্ড অ্যাক্সেস করতে পারবেন না একটি তীর ফাংশনে.

যদিও তীর ফাংশনগুলি একটি ফাংশন লেখার একটি কম্প্যাক্ট বিকল্প, এটি এই কীওয়ার্ডের সাথে আবদ্ধ নয়। অন্য কথায়, একটি তীর ফাংশনে এটি ব্যবহার করে ফেরত দেওয়া বস্তুটি কার্যকরী স্বরলিপিতে লেখার সময় এটি দ্বারা ফেরত দেওয়া হয় না।

এই নির্দেশিকা তীর ফাংশন ইন এবং আউট কভার করে.

jQuery প্রতিটি() উদাহরণ

আসুন উপরের সিনট্যাক্স উদাহরণগুলি প্রসারিত করি এবং কিছু বৈশিষ্ট্য যুক্ত করি। আমরা বিভিন্ন শ্রেণীর অন্তর্গত রঙের তালিকার একটি মৌলিক HTML রেন্ডারিং দিয়ে শুরু করি।

লাল
গোলাপী
কমলা
বেগুনি
 নীল

এটি DOM-এ প্রতিটি পাঠ্য উপাদানকে রেন্ডার করে। প্রথমে, তীর ফাংশন এবং একটি প্রথাগত ফাংশন উভয় ব্যবহার করে কনসোলে পাঠ্য লগিং করে শুরু করা যাক।

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

ColorSelect-এর একটি শ্রেণির নামের সাথে শুধুমাত্র

s নির্বাচন করে, আমরা লাল, বেগুনি এবং নীল লেখাটি লগ করি। লক্ষ্য করুন কিভাবে আমরা jQuery text() কল করার জন্য একটি নতুন jQuery উদাহরণে মান মোড়ক করছি পদ্ধতি এটি করা শুধুমাত্র নির্বাচিত

উপাদানগুলির পাঠ্য ফেরত দেয়।

চলুন একই ফলাফল ফেরত দিই, কিন্তু এই কীওয়ার্ডটি ব্যবহার করে

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

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

আমরা এখন জানি কিভাবে উপাদানের একটি সংগ্রহের উপর পুনরাবৃত্তি করতে হয়। এখন, আসুন কিছু মজা করি এবং রঙ পরিবর্তন করি!

লাল
গোলাপী
কমলা
বেগুনি
 নীল

রঙ তালিকার পৃষ্ঠার সাথে মিল রেখে, আমরা এখন