• Easy
  • 10 Minutes
  • 1 Comment
  • 4.5 / 5
  • December 29, 2013

jQuery foreach: Using jQuery $.each

jquery-mark-light

Learn how to loop through elements, arrays and objects with jQuery using the $.each() function, jQuery’s foreach equivalent.

jQuery’s foreach equivalent can be very useful for many situations. These examples will get you started and teach you how you can loop through arrays, objects and all kinds of HTML elements.

Loop through an Array with jQuery foreach

With most languages you are probably going to need to loop through an array at some point, this is where foreach often becomes very useful. Below is some example jQuery that will loop through an array and output each entry to the console.


$(function(){
	var myArray = ["one", "two", "three", "four", "five"];
	$.each(myArray, function(index, value){
		console.log("INDEX: " + index + " VALUE: " + value);
	});
});

The output of the above will be:

one
two
three
four
five

Loop through Objects with jQuery foreach

Aswell as arrays, you will often want to loop through objects, or arrays of objects, especially when working with JSON data. The following code is an example of looping through some JSON objects.


$(function(){
	var myObjects = [
		{
			id: 1,
			firstname: "Gandalf",
			lastname: "Greyhaem",
		},
		{
			id: 2,
			firstname: "Bilbo",
			lastname: "Baggins",
		},
		{
			id: 3,
			firstname: "Frodo",
			lastname: "Baggins",
		},
	];
	$.each(myObjects, function(){
		console.log("ID: " + this.id);
		console.log("First Name: " + this.firstname);
		console.log("Last Name: " + this.lastname);
		console.log(" ");
	});
});

The output of the above would be:

ID: 1
First Name: Gandalf
Last Name: Greyhaem

ID: 2
First Name: Bilbo
Last Name: baggins

ID: 3
First Name: Frodo
Last Name: Baggins

Loop through a list with jQuery foreach

The ability to be able to loop through elements in a list can be very useful for all kinds of tasks. The code below will loop through every <li> element that has a parent with the .myList class.


$(function(){
	$('.myList li').each(function(){
		$(this).css("color", "green");
	}
	});
});

Loop through other HTML elements with jQuery foreach

As-well as list elements there are benefits to being able to loop through all kinds of HTML elements. Below are a range of examples to demonstrate a few things that are possible.


$(function(){
	//Loop through all links on the page
	$('a').each(function(){
		//Disable the link
		$(this).prop("href", "#");
	});
	//Loop through all elements with the class .hide
	$('.hide').each(function(){
		//Hide it
		$(this).hide(); //Alternative would be $(this).css("display", "none");
	});
	//Find all pre tags an add a class to them
	$('pre').each(function(){
		$(this).addClass("prettyprint");
	});
});

So, there you have a load of examples that should get you started. There are many ways you can utilize the jQuery $.each method. If you know some more great examples, let me know via the comment box below.

RATE:

COMMENTS

  1. Sombir says:

    Thanks a Lot for help….:)

HAVE YOUR SAY

Your email address will not be published. Required fields are marked *

You may highlight code within comments: <pre><code><?php echo 'Your Code!'; ?></code></pre>