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


 

Leave Comment