JavaScript Tutorial JavaScript Examples JQuery Tutorial CSS Tutorial HTML Tutorial About Us

Lesson 18 Looping with each() Method


JQuery allows you to loop through each of the selected elements using the each() method and perform some actions. It is normally used to loop through the <li>elements.

The syntax is:

$(selector).each()

Example 18.1

In this example, include the following CSS in the heading.

<style>
.bgclr{background-color:cyan;
font-weight:bold;
}
.txtclr{color:blue;
font-style: italic;
}
.txtclr1{color:red;
font-style: italic;
}
.txtclr2{color:orange;
font-style: italic;
}
.txtclr3{color:purple;
font-style: italic;
}
</style>

The html section

<!DOCTYPE html>
<html>
<head>
<script>
  $("#btn1").click(function(){
        $("li").each(function(){
        var myid=this.id;
         var mytitle=this.title;
          var myclss=this.class;
        $(this).append('<span class="bgclr">'+myid+'</span>');
         $(this).append('<span class="txtclr">'+mytitle+'</span>');
     
    });
     });
</script>
</head>
<body>
<ul>
<li id="list1"  class="txtclr1" title=" title1"><span>This is item1. My id is= </span>
<li id="list2" class="txtclr2" title=" title2"><span>This is item2. My id is= </span>
<li id="list3" class="txtclr3" title=" title3"><span>This is item3. My id is= </span>
</ul>
<button id="btn1">Click to show the IDs and the Title of each item</button>
</body>
</html>


Example 18.2

We modified Example 18.1 a bit by using the prepend() and append() methods.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){
        $(".txtclr").each(function(){
        var myid=this.id;
         var mytitle=this.title;
          var myclss=this.class;
        $(this).prepend('<span class="bgclr">'+myid+'</span>');
         $(this).append('<span class="txtclr2">'+mytitle+'</span>');
     
    });
     });
});
</script>
</head>
<body>
<li id="list1"  class="txtclr" title=" title1"><span> is item1. My id is= </span>
<li id="list2" class="txtclr" title=" title2"><span>is item2. My id is= </span>
<li id="list3" class="txtclr" title=" title3"><span>T is item3. My id is= </span>
</ul>
<button id="btn2">Click to show the IDs and the Title of each item</button>

</body>
</html>



18.2 The $.each() function

The $,each() function is different from the $(selector).each() function. It is used to iterate over a jQuery object or an array.

In the case of an array, the callback function is passed an array index and a corresponding array value each time during the iteration.

You can break the $.each() loop at a particular iteration by making the callback function return false.

Example 18.3

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn3").click(function(){
var MyArray = [ "first", "second", "third", "fourth", "fifth" ];
var MyObj = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 };
 
$.each( MyArray, function( i, val ) {
  $( "#" + val ).text( "The " + val+" number is");
  
  //Stop the loop
  return ( val !== "Fourth" );
 });
 $.each( MyObj, function( i, val ) {
  $( "#" + i ).append(val);
});

});
});
</script>
</head>
<body>
<ul>
<li id="First" class="color1">
<li id="Second" class="color2">
<li id="Third" class="color3">
<li id="Fourth" class="color4">
<li id="Fifth" class="color5">
</ul>

<button id="btn3">Click to loop through the array</button>
</body>
</html>

Example 18.4

We can modify Example 18.3 by adding in some arithmetic calculations.

we introduce a variable sum to add all the numbers.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
     $("#btn4").click(function(){
var MyArray = [ "first", "second", "third", "fourth", "fifth" ];
var MyObj = { first: 10, second: 20, third: 30, fourth: 40, fifth: 50 };
var sum=0;
$.each( MyArray, function( i, val ) {
  $( "#" + val ).text( "The " + val+" number ");

 });
 $.each( MyObj, function( i, val ) {
  $( "#" + i ).append("="+val);
  sum=sum+val;
  $("#mysum").text(sum);
});
});
});
</script>
</head>
<body>
<ul>
<li id="First" class="color1">
<li id="Second" class="color2">
<li id="Third" class="color3">
<li id="Fourth" class="color4">
<li id="Fifth" class="color5">
</ul>

<button id="btn3">Click to loop through the array</button>
</body>
</html>

The sum is





Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy