jQuery each method

« Previous Next »

jQuery each method

In this blog, let us know how can we iterate over array and objects in jQuery.

jQuery each is one of the utility methods to iterate over array or objects which is provided as argument.

Let us see the syntax,

$.each(, function(, {
//-------------
//------------
});

Also we are going to see the jQuery example code for using each method to iterate over array of strings, objects and output of the program.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var arrStr = ["Testing1", "Testing2", "Testing3"];
            var obj = {
                "key1": "value1", "key2": "value2"
            };
            $('#result').append("<p>Iterates array</p>");
            $.each(arrStr, function (index, val) {
                $('#result').append("<p>string " + index + ": " + val + "</p>");
            });
            $('#result').append("<p>Iterates object</p>");
            $.each(obj, function (key, val) {
                $('#result').append("<p>string " + key + ": " + val + "</p>");
            });
        });
    </script>

</head>
<body>
       <div id="result"></div>
</body>
</html>

Output:

This jQuery performs following,

iterate over the array of strings and append the array element with index inside result div element.

iterate over the obejcts and append the objects field value with field name (key value pair) inside result div element.

Also prints hte difference of iterate over array and objects to understand the ddifference.

« Previous Next »

jQuery Programming Examples

Simple Filter HTML Table Rows in jquery

jQuery each method

jQuery each method

Simple Filter HTML Table Rows in jquery

jQuery ui datepicker with disabled date ranges

jQuery ui datepicker change event to submit the form

Getting screen coordinates in jQuery

Getting mouse positions in jQuery

Getting pressed key code in jQuery

Getting multiple elements using tag, id and class in jQuery

Checking element tag in jQuery

Getting element by index in jQuery

Highlights the odd and even rows in different colors in jQuery

Simple Filter HTML Paragraph Tags in jquery

Enable / disable HTML input fields in jQuery

Remove leading and trailing space in text of HTML element using jQuery

jQuery Adding HTML Table Row Dynamically

jQuery Deleting HTML Table Row Dynamically

jQuery Deleting Selected Multiple HTML Table Rows

jQuery Getting Selected Checkbox Values

Update page title using jquery

print objects

Update page title using jquery

print objects