Jquery each() method (jQuery each)

each method Jquery তে for লুপের মত।ধরুন আপনার ডকুমেন্টে একটা table আছে এবং এখানে অনেকগুলি সারি (row) আছে,তাহলে আপনি সব row কে এভাবে select করতে পারেন।

1.$('table tr')

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

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

 

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

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.});

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

**আপনি ইচ্ছে করলে যেকোন ইনডেক্সে গিয়ে 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.});

 

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