জেকোয়েরি each() মেথড (jQuery each)

 



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

1.$('table tr')

এখন যদি এই টেবিলে ১০টি সারি থাকে তাহলে সব সিলেক্ট হল।এখন এই ১০ টি সিলেক্টেড এলিমেন্টকে আপনি each মেথড দিয়ে লুপে ফেলে দিতে পারেন।এরপর এর উপর যেকোন একশন নিতে পারেন যেকোনটির উপর।শুধু টেবিল নয়,হতে পারে ul এর ভিতর অনেক li আছে বা একটা ডিভের সব a ট্যাগ ইত্যাদি সিলেক্ট করে এভাবে লুপ বানাতে পারেন।কেন এত লুপিং লাগে?কারন

-সিলেক্টেড এলিমেন্টগুলি নিয়ে অ্যারে তৈরী করে প্রত্যেকটি এলিমেন্ট একটি ইউনিক ইনডেক্স পায় ফলে ইচ্ছে করলে যেকোন এলিমেন্ট এই each মেথড দিয়েই ধরা যায়।

-যেমন আমি টেবিলের সারিগুলির ব্যাকগ্রাউন্ড রং যদি alternate করে দেখতে চাই তাহলে প্রতিটি জোর বা বিজোর সারিতে (tr) গিয়ে ক্লাস যোগ করার পরিবর্তে each মেথড দিয়ে লুপিং করে তা করা যায়।

index.html ফাইল

01.<!doctype html>
02. 
03.<head>
04. 
05.<title>codestrickz Jquery tutorials!</title>
06.<link rel="stylesheet" href="/style.css" type="text/css"/>
07. 
08.<script src="/jquery_latest.js" type="text/javascript"></script>
09.<script src="/script.js" type="text/javascript"></script>
10.</head>
11.<body>
12.<table>
13.<thead>
14.<tr>
15.<th>ID</th>
16.<th>Name</th>
17.<th>Mail</th>
18.<th>Phone</th>
19.<th>Address</th>
20.</tr>
21.</thead>
22.<tbody>
23.<tr>
24.<td>1</td>
25.<td>Rejoanul Alam</td>
26.<td>rejoan.er AT gmail DOT com</td>
27.<td>123456</td>
28.<td>JU</td>
29.</tr>
30.<tr>
31.<td>1</td>
32.<td>Rejoanul Alam</td>
33.<td>rejoan.er AT gmail DOT com</td>
34.<td>123456</td>
35.<td>JU</td>
36.</tr>
37.<tr>
38.<td>1</td>
39.<td>Rejoanul Alam</td>
40.<td>rejoan.er AT gmail DOT com</td>
41.<td>123456</td>
42.<td>JU</td>
43.</tr>
44.<tr>
45.<td>1</td>
46.<td>Rejoanul Alam</td>
47.<td>rejoan.er AT gmail DOT com</td>
48.<td>123456</td>
49.<td>JU</td>
50.</tr>
51.<tr>
52.<td>1</td>
53.<td>Rejoanul Alam</td>
54.<td>rejoan.er AT gmail DOT com</td>
55.<td>123456</td>
56.<td>JU</td>
57.</tr>
58.<tr>
59.<td>1</td>
60.<td>Rejoanul Alam</td>
61.<td>rejoan.er AT gmail DOT com</td>
62.<td>123456</td>
63.<td>JU</td>
64.</tr>
65.</tbody>
66.</table>
67.</body>
68.</body>
69.</html>

style.css ফাইল

01.body {
02.font-family"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
03.color#3E3E3E;
04.background#efefef;
05.font-size12px;
06.}
07. 
08. 
09.table {
10.border-collapse:collapse;
11.font-size:12px;
12.margin:0 20px 20px 20px;
13.border-top:2px solid #015287;
14.width:480px;
15.}
16. 
17. 
18.th {
19.border-bottom2px solid #015287;
20.color#D15600;
21.font-size14px;
22.font-weightnormal;
23.text-alignleft;
24.padding3px 8px;
25.}
26. 
27. 
28.td {
29.padding6px;
30.}
31..odd{
32.background:ivory;
33.}
34..even{
35.background:#ccc;
36.}

script.js ফাইল

01.$(document).ready(function(){
02.$('table tr').each(function(i){
03.if(i % 2 == 0){
04.$(this).addClass('even');
05.}else{
06.$(this).addClass('odd');
07.}
08.});
09.});

আউটপুট:

IDNameMailPhoneAddress
1Rejoanul Alamrejoan.er AT gmail DOT com123456JU
1Rejoanul Alamrejoan.er AT gmail DOT com123456JU
1Rejoanul Alamrejoan.er AT gmail DOT com123456JU
1Rejoanul Alamrejoan.er AT gmail DOT com123456JU
1Rejoanul Alamrejoan.er AT gmail DOT com123456JU
1Rejoanul Alamrejoan.er AT gmail DOT com123456JU


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


**আপনি ইচ্ছে করলে যেকোন ইনডেক্সে গিয়ে iterating (পুনরাবৃত্তি) থামিয়ে দিতে পারেন।যেমন

01.$(document).ready(function(){
02.$('table tr').each(function(i){
03.if(i < 5){
04.if(i % 2 == 0){
05.$(this).addClass('even');
06.}else{
07.$(this).addClass('odd');
08.}
09.}
10.});
11.});

আউটপুট:

IDNameMailPhoneAddress
1Rejoanul Alamrejoan.er AT gmail DOT com123456JU
1Rejoanul Alamrejoan.er AT gmail DOT com123456JU
1Rejoanul Alamrejoan.er AT gmail DOT com123456JU
1Rejoanul Alamrejoan.er AT gmail DOT com123456JU
1Rejoanul Alamrejoan.er AT gmail DOT com123456JU
1Rejoanul Alamrejoan.er AT gmail DOT com123456JU

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

Post a Comment

Cookie Consent
Little Blog serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the data/wifi internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.