Lesson 18 Looping with each() Method

❮ Previous Lesson Next Lesson ❯

jQuery allows you to loop through each of the selected elements using the each() method and performs 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>

This is item1. My id is=
This is item2. My id is=
This is item3. My id is=

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>

is item1. My title is=
is item2. My title is=
is item3. My title is=

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>
 <style>
  .color1 {
    color: blue;
  }
  .color2 {
    color: red;
  }
    .color3 {
    color: green;
  }
    .color4 {
    color: purple;
  }
    .color5 {
    color: orange;
  }
</style>
</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

❮ Previous Lesson Next Lesson ❯