Jquery-Write less, do more

জেকোয়েরি each() মেথড পর্ব-৫

each মেথড জেকোয়েরিতে for লুপের মত। ধরুন আপনার ডকুমেন্টে একটা টেবিল আছে এবং এখানে অনেকগুলি সারি (row) আছে, তাহলে আপনি সব row কে এভাবে সিলেক্ট করতে পারেন।
$(‘table tr’)
এখন যদি এই টেবিলে ১০টি সারি থাকে তাহলে সব সিলেক্ট হল। এখন এই ১০ টি সিলেক্টেড এলিমেন্টকে আপনি each মেথড দিয়ে লুপে ফেলে দিতে পারেন। এরপর এর উপর যেকোন একশন নিতে পারেন যেকোনটির উপর। শুধু টেবিল নয়, হতে পারে ul এর ভিতর অনেক li আছে বা একটা ডিভের সব a ট্যাগ ইত্যাদি সিলেক্ট করে এভাবে লুপ বানাতে পারেন। কেন এত লুপিং লাগে? কারন
-সিলেক্টেড এলিমেন্টগুলি নিয়ে অ্যারে তৈরী করে প্রত্যেকটি এলিমেন্ট একটি ইউনিক ইনডেক্স পায় ফলে ইচ্ছে করলে যেকোন এলিমেন্ট এই each মেথড দিয়েই ধরা যায়।
-যেমন আমি টেবিলের সারিগুলির ব্যাকগ্রাউন্ড রং যদি alternate করে দেখতে চাই তাহলে প্রতিটি জোর বা বিজোর সারিতে (tr) গিয়ে ক্লাস যোগ করার পরিবর্তে each মেথড দিয়ে লুপিং করে তা করা যায়।
এরূপ একটি উদাহরন

ফাইল

ফাইল

আউটপুট:

ব্যাখ্যা: এইচটিএমএল এবং সিএসএস এর তো ব্যাখ্যার প্রয়োজন নেই,সহজ। জেকোয়েরিতে সব আগে ডকুমেন্ট রেডি করে এর ভিতর সব tr সিলেক্ট করে each মেথড দিয়ে iterate করলাম। এরপর বর্তমান tr এর index কে ২ দিয়ে মডুলাস করে দেখলাম ভাগফল ০ কিনা। যদি ০ হয় তাহলে জোড় ইনডেক্স পাচ্ছি এবং সাথে সাথে সেই tr এ even নামে একটা ক্লাস জুরে দিচ্ছি। আর তা নাহলে odd ক্লাস যোগ হবে অর্থাৎ যদি বিজোড় হয়। i প্যারামিটারে ইনডেক্স মানগুলি আছে।
**আপনি ইচ্ছে করলে যেকোন ইনডেক্সে গিয়ে iterating (পুনরাবৃত্তি) থামিয়ে দিতে পারেন। যেমন

আউটপুট:

অর্থাৎ যতক্ষন tr এর ইনডেক্স ৫  এর ছোট পাবে ততক্ষন odd,even ক্লাস যোগ হতে থাকবে। $(‘table tr’) দ্বারা যতগুলি tr সিলেক্ট হয়েছে তার মধ্যে প্রথমটির ইনডেক্স ০ থেকে শুরু হয় এরপরেরটি ১, তারপরেরটি ২ … এভাবে

 

এডভার্টাইজমেন্ট

কম্পিউটার বার্তার ইমেইলে আপডেট

আপনার ইমেইল এডড্রেস এখানে নিবন্ধন করুন, নতুন নিউজ পেয়ে যাবেন আপনার নিজের ইমেইলের ইনবক্সে :

এখন পর্যন্ত এই সুযোগ গ্রহন করেছেন:

Year 16 Issue 09 JANUARY 2013

এডভার্টাইজমেন্ট

Archives