Home > DeveloperSection > Articles > JQuery each method

JQuery each method

Posted by  Sachindra Singh
on    February-21-2011 22:02 PM

JQuery JQuery 
Ratings:
0 Comment(s)
 2329  View(s)
Rate this:

JQuery each method

The $.each () function can be used to iterate over any element collection. This function runs on the matched element. The each () method specifies a function to run for each matched element. In this example I am using each method to show each city name that defined in <option> element.

Syntax: $(“target”).each ();

Code:

<title>JQuery each method</title>

 

    <script type="text/javascript" src="jquery.min.js">     </script>

 

    <script type="text/javascript">

        $(document).ready(function() //ready function contain all jquery function

        {

            $("button").click(function            {

                $("option").each(function()// each method will retrieve all city name that define in <option> element

 {

                alert($(this).text()); //this line will show city name

                });

            });

 

        });

    </script>

 

</head>

<body>

    <h2>

        JQuery each method</h2>

    <table width="200">

        <tr>

            <td align="center">

                City List

            </td>

        </tr>

        <tr>

            <td>

                <select>

                    <option>Allahabad</option>

                    <option>Varanasi</option>

                    <option>Lucknow</option>

                    <option>Kanpur</option>

                    <option>Fridabad</option>

                    <option>Mumbai</option>

                    <option>Chandigarh</option>

                </select>

            </td>

            <td>

                <button>

                    Total Cities</button>

              

            </td>

        </tr>

    </table>

</body>

When I will click on city button the name of city will popup on window as shown below:

Screenshot

JQuery each method

 
















Recent Activities


Sumit Kesarwani added new Question What is the Vector class in java?   yesterday

Anchal Kesharwani added new Blog JSON Syntax   8 days ago

Anchal Kesharwani added new Article How to Send Mail in Node.JS   8 days ago

Top Contributors

Don't want to miss updates? Please click the below button!