jQuery $(selector).each() example

How to loop thru jQuery Objects using $(selector).each()

jQuery .each() is one of the most frequently used functions. Basically, the jQuery .each() function is used to loop through each element of the target jQuery object.
.each( function(index, Element) )

The callback function is called for every element that matches the selector. The index and the object is passed as parameters to the call. The function runs within the scope of the target element meaning you can use $(this) to refer to the actual element. Here is an example of the .each() function that iterates over the <td> elements inside a HTML Table with a specific class.


jquery $(selector).each() example

HTML source code for the application - index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
<head>
<title>jQuery .each() Example</title>
 
<link
 rel="stylesheet" type="text/css" />
<script
 type="text/javascript">
</script>
<script
 type="text/javascript">
</script>
<script type="text/javascript" src="app.js"></script>
 
<style type="text/css">
 
table {
 border: 1px black solid;
 border-collapse: collapse;
}
 
th {
 background-color: #8b8b83;
 color: white;
 text-align:left;
 padding-left: 10px;
}
 
tr {
 background-color: white;
 margin: 1px;
}
 
.shaded {
 background-color: #eeeee0;
}
 
td {
 padding-left: 10px;
 text-align:left;
}
</style>
</head>
<body>
<div id="myExample">
 <table id="myTable">
  <tbody>
   <tr>
    <th>Country Code</th>
    <th>Country Name</th>
    <th>Continent</th>
    <th>Region</th>
   </tr>
   <tr>
    <td class="code">ABW</td>
    <td>Aruba</td>
    <td>North America</td>
    <td>Caribbean</td>
   </tr>
   <tr>
    <td class="code">AFG</td>
    <td>Afghanistan</td>
    <td>Asia</td>
    <td>Southern and Central Asia</td>
   </tr>
   <tr>
    <td class="code">AGO</td>
    <td>Angola</td>
    <td>Africa</td>
    <td>Central Africa</td>
   </tr>
   <tr>
    <td class="code">AIA</td>
    <td>Anguilla</td>
    <td>North America</td>
    <td>Caribbean</td>
   </tr>
   <tr>
    <td class="code">ALB</td>
    <td>Albania</td>
    <td>Europe</td>
    <td>Southern Europe</td>
   </tr>
   <tr>
    <td class="code">AND</td>
    <td>Andorra</td>
    <td>Europe</td>
    <td>Southern Europe</td>
   </tr>
   <tr>
    <td class="code">ANT</td>
    <td>Netherlands Antilles</td>
    <td>North America</td>
    <td>Caribbean</td>
   </tr>
   <tr>
    <td class="code">ARE</td>
    <td>United Arab Emirates</td>
    <td>Asia</td>
    <td>Middle East</td>
   </tr>
   <tr>
    <td class="code">ARG</td>
    <td>Argentina</td>
    <td>South America</td>
    <td>South America</td>
   </tr>
   <tr>
    <td class="code">ARM</td>
    <td>Armenia</td>
    <td>Asia</td>
    <td>Middle East</td>
   </tr>
  </tbody>
 </table>
 <p><input type="button" id="myButton"
            value="Click here to loop thru this Table using .each() method"></p>
  
<b>Response:</b>
&nbsp;
</div>
<div id="myResponse">
</div>
</body>
</html>

jQuery source code for the application - app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
 
 $("#myButton").click(function(event){
 
  $("#myResponse").html("");
  $('#myTable').find("td.code").each(function(index){
   var myData = $(this).html();
   setTimeout(function() {
    $("#myResponse")
           .append(index + ") Country Code: " + myData + "
");
   },200 * index);
  });
 
 });
 
});

Difference between jQuery $(selector).each() and $.each()

Please don't be confused, these are two entirely different functions. The $(selector).each() function is called for every element that matched our query selector whereas the $.each() loops thru a collection of javaScript objects such as an Array object. Here is an example of $.each that loops thru a JSON array...

1
2
3
4
5
6
7
var myArray = [{ "color": "Red" },{ "color": "green" },{ "color": "yellow" }];
           
    $.each(myArray, function() {
     $.each(this, function(name, value) {
      console.log(name + '=' + value);
     });
    });

Console Display:
color=Red
color=green
color=yellow

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.