jQuery forEach example

Saeb NajimDecember 2nd, 2015Last Updated: December 21st, 2017

2 276 2 minutes read

This example explains how to use iteration in jQuery. jQuery provides a powerful function for looping over elements.

The jQuery each() function helps to iterate over an array, object properties and all HTML elements.

This function has many overloaded signatures that take different arguments, all overloaded signatures take anonymous callback function to deal with current item.

Let’s look at some examples. To download the jQuery library click here.

1. HTML

First of all you need to create a simple html document.

<!DOCTYPE html>
<html>
<head>
	<title>jQuery forEach Example</title>
	<script src="jquery-2.1.4.min.js"></script>
</head>
<body>

</body>
</html>

2. jQuery foreach examples

2.1 Iterate through selected checkboxes example

This example iterates over selected checkboxes’ elements and shows their values in an alert.

Let’s add some checkboxes with a link to our html code


<input type="checkbox" name="color" value="red">Red</br>
<input type="checkbox" name="color" value="white">White</br>
<input type="checkbox" name="color" value="blue">Blue</br>
<a href="javascript:return 0" onclick="showSelectedColors()" >Show Selected Colors</a>

In the following jQuery code, $("input:checked") returns a list of checked boxes. To loop over this list each() function has been used. The each() function iterates over list and call callback function for each element . $(this) is used for accessing the current element.

<script type="text/javascript">
	function showSelectedColors(){
		var selectedColors="selectedColors are ";
		$("input:checked").each(function() {
		  selectedColors += $(this).val();
		  selectedColors +=" "
		});
		alert(selectedColors);
	}
</script>

The result in the browser would be:

Iterate over selected colors example — Iterate through selected checkboxes example

2.2 Iterate through an array example

In the following example we will loop over an array of visitors’ names and append them to html document .

Let’s create a div with a simple link that calls javascript function when it is pressed .

<style type="text/css">
		.areaInfo{
			width:200px;
			height:200px;
			border:2px solid #e0e0e0;
			padding:10px;
		}
</style>

<!-- Example 2-->
<div id="area" class="areaInfo"></div><br/>
<a href="javascript:return 0" onclick="showVisitors()" >Show Visitors</a>

The $.each() function takes two arguments. The first argument must be an array or object, this example passes an array. The second one is an anonymous callback function with two arguments: the index of the current item and the item’s value. Notice that the index starts with zero.

<script type="text/javascript">
	//Example 2
	var names = ["Cem ","Can ","Kim "] ;
	function showVisitors(){
		$("#area").html("");
		$.each(names,function(index,value) {
		  $("#area").append(index +"-"+value+"<br/><br/>");
		});
	}
</script>

The result in the browser would be:

2.3 Iterate through an object example

In the following example we will loop over an object’s properties and we will append them to the html document.

Let’s create a div with a simple link that calls a javascript function when it is pressed .

<style type="text/css">
		.areaInfo{
			width:200px;
			height:200px;
			border:2px solid #e0e0e0;
			padding:10px;
		}
</style>

<!-- Example 3-->
<div id="area" class="areaInfo"></div><br/>
<a href="javascript:return 0" onclick="showStudentInfo()" >Show Student Info</a>

As explained in the previous example, the first argument of the $.each() function may be an object. If the first argument is an object, then the callback function will get the object’s property name as it’s first argument and the second will be the property value.

<script type="text/javascript">
	//Example 3
	var student = {name:"Cem " , age:22, country:"us"}
	function showStudentInfo(){
		$("#area").html("");
		$.each(student,function(k,value) {
		  $("#area").append(k +" : "+value+"</br></br>");
		});
	}
</script>

The result in the browser would be:

3.Conclusion

Looping through an array or object properties is useful and most commonly used in the programming world. jQuery provides a powerful function that helps in looping through an array or object. The jQuery each() function is used to loop over a collection of elements and send each element’s info to a callback function. The jQuery each() function has many overloaded signatures that take different arguments as demonstrated in the previous examples.