each() function in Jquery - To Iterate each element over a collection

.each() function:   This function is used to iterate over the collections.
This function is same working as foreach function in asp.net.

Syntax:

 $(selector).each(callback function(){

});

Example:  Iterate over each row of a table.

$("table tr").each(function () {

     alert($(this).text());

});

You can also pass the parameters into the callback functions:

Syntax:

$(selector).each(callback function(index,element){

});

Index will give you the index of the current item.

Element will give you current element.

Example:

$(document).ready(function () {

     $("table tr").each(function (index, element) {

         alert($(element).text() + " at index: " + index);

     });

 });

Working of nested .each function:

JQuery Selector - Select control by #Id

Selector plays a vital role in JQuery. They are used to select the control.

You can select a control by its Id, Class, tag etc.

Id Selector:

Id selector is used to select a control by its Id. We are using ’#’ in syntax.

Syntax:  $(‘#control-id’).event (…..)

<head>

    <title></title>

    <script src="Scripts/jquery-1.10.2.js"></script>

    <script type="text/javascript">

        $(document).ready(

            function () {

 $("#Button1").css("color","Red")

            });

    </script>

</head>

<body>

    <input id="Button1" type="button" value="click" />

</body>

================================================================

Id Selector returns the collection of objects, if html page has multiple controls with the same Id.

If you want to find the control is exists or not on a page you can use the length property to get the length of the collection return by id selector.

<head>

    <title></title>

    <script src="Scripts/jquery-1.10.2.js"></script>

    <script type="text/javascript">

        $(document).ready(

            function () {

                if ($('#Button2').length > 0) {

                    alert("Button2 Exists.")

                }

                else

                    alert("Button2 Not Exists.")

            });

    </script>

</head>

<body>

    <input id="Button2" type="button" value="click" />

</body>

=========================================================================================

Calculate Height and Width of a image in JQuery.

Use the JQuery inbuilt functions :

$(<image selector>).height() to calculate the height of the image.
$(<image selector>).width() to calculate the width of the image.

Here <image selector> is the selector of image, you can select the image by its tag,id, class etc.

for ex, 
you can select an image by its id (use #)
$('#imgdesert').height()

you can select an image by its class (use dot '.')
$('.myimage').height()

<script type="text/javascript">

    $(window).load(function () {

        $('#imageheightwidth').html(

            "Image height: " + $('#imgdesert').height() + " <br/> Image width: " + $('#imgdesert').width()

            );

    });

</script>

<body>

    <label id="imageheightwidth" class="myimage"></label><br />

    <img id="imgdesert" src="Desert.jpg" />

</body>



Output:

Image height: 700

Image Width : 800


Notes: if you calculate the Image height & width in $(document).ready event , you will get the Image's height and width both Zero. 
Reason is $(document).ready event fires before the image fully loaded and find no image when calculate the dimensions and will show default value i.e 0

Difference between $(document).ready & $(window).load JQuery events

Understand with an example: Calculate Image height & width and display on web page.

     1.     First write code in $(document).ready() event

<script type="text/javascript">

    $(document).ready(function () {

        $('#imageheightwidth').html(

            "Image height: " + $('#imgdesert').height() + " <br/> Image width: " + $('#imgdesert').width()

            );

    });

</script>

<body>

    <label id="imageheightwidth"></label><br />

    <img id="imgdesert" src="Desert.jpg" />

</body>

Output:

Image height: 0

Image width: 0

You got the height & width zero because $(document).ready(function () fires before images fully loaded and find no image.

2. Secondly write the same code in $(window).load() event

  <script type="text/javascript">

    $(window).load(function () {

        $('#imageheightwidth').html(

            "Image height: " + $('#imgdesert').height() + " <br/> Image width: " + $('#imgdesert').width()

            );

    });

</script>

Output:

Image height: 768

Image width: 1024

Now you got the correctly calculated height and width because $(window).load(function () fires after images fully loaded and found the image when calculated.