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

22:33 – by 0

জেকোয়েরি 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>Webcoachbd 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-size: 12px;
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-bottom: 2px solid #015287;
20.color: #D15600;
21.font-size: 14px;
22.font-weight: normal;
23.text-align: left;
24.padding: 3px 8px;
25.}
26. 
27. 
28.td {
29.padding: 6px;
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.});
আউটপুট:
ID Name Mail Phone Address
1 Rejoanul Alam rejoan.er AT gmail DOT com 123456 JU
1 Rejoanul Alam rejoan.er AT gmail DOT com 123456 JU
1 Rejoanul Alam rejoan.er AT gmail DOT com 123456 JU
1 Rejoanul Alam rejoan.er AT gmail DOT com 123456 JU
1 Rejoanul Alam rejoan.er AT gmail DOT com 123456 JU
1 Rejoanul Alam rejoan.er AT gmail DOT com 123456 JU

ব্যাখ্যা: এইচটিএমএল এবং সিএসএস এর তো ব্যাখ্যার প্রয়োজন নেই,সহজ।জেকোয়েরিতে সব আগে ডকুমেন্ট রেডি করে এর ভিতর সব 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.});
আউটপুট:

ID Name Mail Phone Address
1 Rejoanul Alam rejoan.er AT gmail DOT com 123456 JU
1 Rejoanul Alam rejoan.er AT gmail DOT com 123456 JU
1 Rejoanul Alam rejoan.er AT gmail DOT com 123456 JU
1 Rejoanul Alam rejoan.er AT gmail DOT com 123456 JU
1 Rejoanul Alam rejoan.er AT gmail DOT com 123456 JU
1 Rejoanul Alam rejoan.er AT gmail DOT com 123456 JU
অর্থ্যাৎ যতক্ষন tr এর ইনডেক্স ৫  এর ছোট পাবে ততক্ষন odd,even ক্লাস যোগ হতে থাকবে।$('table tr') দ্বারা যতগুলি tr সিলেক্ট হয়েছে তার মধ্যে প্রথমটির ইনডেক্স ০ থেকে শুরু হয় এরপরেরটি ১, তারপরেরটি ২ ... এভাবে

0 মন্তব্য(গুলি):

Post a Comment

Subscribe to: Post Comments (Atom)