Blog Archive

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

<html>
<head>
<title>jQuery .each() Example</title>

<link
 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
 rel="stylesheet" type="text/css" />
<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
 type="text/javascript">
</script>
<script
 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
 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>
 <br/><b>Response:</b><br/>&nbsp;
</div> 
<div id="myResponse">
</div> 
</body>
</html>

jQuery source code for the application - app.js

$(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 + "<br/>");
   },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...

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