Using/Implementing “$().each ()” function of JQuery efficiently with example


Purpose:
        $().each () function is the “for loop” for JQuery. It takes the first element in the matched list of JQuery Objects and executes a function on it, and goes to the next element and does the same until all the elements in the matched list are looped through.

Implementation:
       Consider a scenario where you want to colour the <div> tags on your page depending on the class name. Let us implement this step by step by using $().each () with clear and simple example.
    The idea of implementation is to get all the divs on the page and check their class names. Assign a background colour to the div depending up on the class name.

Step 1: 
       Download JQuery Library from https://jquery.com/download/ and copy the files to one of          your project folders as below. I have added minified version of JQuery here, you can add the full   version if you want.


Step2: 
        Add a Web Form to the website as below and name it as Home.aspx.


Step 3: 
        Add reference of it to Home.aspx as shown below.
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="Scripts/JQueryScript.js" type="text/javascript"></script>
</head>

Step 4
         Create 3 divs as shown below with three different classes namely red, green, and yellow as shown below.
<body>
    <form id="form1" runat="server">
    <div class="red">
    <p>This is a red div</p>
    </div>
     <div class="green">
    <p>This is a green div</p>
    </div>
     <div class="yellow">
    <p>This is a yello div</p>
    </div>
    </form>
</body>

Step 5: 
         At this stage if you run this code, you will see no background colours added to the divs, as shown below.

Step 6: 
      To iterate through these divs and change their back ground colours, let us create a separate JavaScript file, and add it’s reference to the .aspx ,just as you did for JQuery library file, as below.
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="Scripts/JQueryScript.js" type="text/javascript"></script>
</head>

Step 7: 
         The syntax of the $().each () goes as below.
             $(JQuery Object’s Selection Criteria).each (function (index, Item) {
              }
      });
Now open up the JavaScript file that we created in step 6 and start writing the code as below.


JQueryScript.js

$(document).ready(function () {
    $("div").each(function (index, item) {
        var divClass = $(item).attr("class");
        if (divClass == "red") {
            $(item).css("background-color","red");
        }
        if (divClass == "green") {
            $(item).css("background-color", "green");
        }
        if (divClass == "yellow") {
            $(item).css("background-color", "yellow");
        }
    });
});

Now let’s go through each line of code and understand it:
        The reason why we are writing this code in $(document).ready() function is because we want see the colour change as soon as the page gets loaded, rather when an event like a button click happens. From our requirement, we need to set up the back ground colour for all divs, so the selection criterion is “DIV”. In the syntax the “index” parameter always contains the index of the current element in the list, and the “item “always contains the element itself.
In the example we are trying to get the class attribute of the div element using JQuery’s “.attr” method. The reason why we are able to use this method is because we are wrapping up the current item with JQuery wrapper $() as $(item), thus making it a JQuery object.

Note: If you don’t make it as a JQuery object, you cannot use JQuery’s methods like “.attr”,”. css”.
After getting the class attribute’s value to the variable “divClass”, we are comparing this value against the three colours, and if one them matches, we are changing the background colour to corresponding colour using “.css” method of JQuery. 
Thus getting the following output:

Note: You can change the parameter names from index, item to whatever you want .But the first parameter always represents the index of the current element in the list starting from 0, and the second parameter always represents the element itself. Remember that the $().each () is not the same as the jQuery utility method jQuery.each (object, callback).This $().each () will iterate exclusively through jQuery objects.





Reactions:

0 comments :

Post a Comment