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
Leave Comment
1 Comments