Using the jQuery foreach Equivalent

jquery foreachjQuery is a cross-platform JavaScript library that was originally developed to simplify HTML scripting, but it has evolved into one of most important mechanisms for coding mobile-ready applications and sites.  The evolution of the jQuery library is most apparent in the way that it has grown to encompass functions that are supported by other libraries – showcasing the internal flexibility of jQuery and the value of HTML-5 user interface design.

jQuery has a powerful foreach equivalent, $.each(), that is used to loop through objects and arrays.  This is useful for many situations because it can simplify the writing of HTML code and it can dramatically reduce development time for long projects.  To learn this command (and many others) in more detail, consider taking the jQuery in-depth beginners course – complete with HTML and CSS refreshers and a whole set of practice exercises and sandbox pages.

What Does foreach Do?

The jQuery foreach function, like other jQuery functions, can accept callbacks and is used like any other function.  Foreach loops over the selected arrays, objects, items, or lists, and it performs another function each time.

For example, you could set up code that would loop through a list of testimonials, look for a particular trait of those testimonials, then serve up the testimonial that met the filter.  This could potentially be used to display product-relevant testimonials on a website to serve content only to customers that meet different tracking criteria.

The jQuery foreach function loops over elements and keeps track of the element index – and it can add a class with its independent index value.  If you are relatively familiar with jQuery, using this loop can save you a great deal of time – although there are other JavaScript workarounds that might be even faster for the advanced coder.

jQuery makes mobile design more accessible for novice coders – learn how today!

Looping through Arrays

Let’s imagine that we wanted to loop through an array, going through the months of the year one by one.  In this case, we would first set up the array (the calendar months) and then we would use the foreach equivalent to loop through that array to output the values onto the console.

An array is an ordered list of values that store different items with the same type.  For example, you could create an array of numbers, or an array of words, but you can’t create an array that combines the two.  According to the Google coding guidelines (the de facto authority on jQuery coding) you should always use the literal method when you are defining a new array because it is easier to follow for people that are evaluating and editing your code.

$ (function() {

var myArray = [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”] ;

$.each (myArray, function(index, value) {

console.log (“INDEX:  “  +  index  + “VALUE:  “  +  value) ;

Looping through an array is relatively simple – in the case above (after closing the trailing tags) you would end up with a sequential output of the ‘values’ or the months in this case.  Obviously, you can also do the jQuery foreach without outputting the values to the console.

If you don’t have a defined array, the jQuery foreach function can also serve to add values to the empty array.  This is a little more complex, but you can accomplish it with the command myArray.push() and you can loop the addition of values to either the same array or a new array.

Looping through Objects

What if you need to loop through JSON objects, or you have an array of objects that you want to loop through?  This is also possible in much the same way.  A jQuery object is basically an array, but it also gives every element in the object a numeric index so it can be accessed by calling up that index.  In the case below, rather than having to reference the objects by their address numbers and street names, each address is given a numeric index code that references the completed object.  jQuery objects are unfortunately not as flexible as JavaScript Array objects, so functions like join() only work on the Javascript objects.

The following code segment will define three street addresses, then it will output those three street addresses to the console with a jQuery foreach loop.

$(function(){

var myObjects = [

{

id: 1,

addressnumber: "123",

streetname: "Maple Drive",

},

{

id: 2,

addressnumber: "456",

streetname: "Frosty Circle",

},

{

id: 3,

addressnumber: "789",

streetname: "Sycamore Street",

},

];

$.each(myObjects, function(){

console.log("ID: " + this.id);

console.log("Address Number: " + this.addressnumber);

console.log("Street Name: " + this.streetname);

console.log(" ");

});

Obviously, this is helpful for a wide range of programming tasks, and it will keep you from having to manually input the objects over and over again in the same document.

For lessons on objects, arrays, and more complex manipulation of data in a jQuery environment, take the next step in your jQuery journey with this complete mastery course.  Go from novice programmer to expert mobile/website developer in only a few steps – and learn from the best in the business.

Looping through lists

Looping through lists is functionally the same as looping through an array, except you are utilizing the jQuery foreach function after the list has been defined.

By setting a foreach on a <li> element, you can choose which class you want to loop.  This seems more complex than it actually is in practice.  If you have a simple unordered list on a page of different names, you can run the $.each command to select the list items, then output the values of each list item while giving it an index number.

If my list on the HTML page was:

  • Bob
  • Sam
  • Terry

Then my $(“li).each(function( index) { would select that list and would return the names of the list (and their index number) – I could then output these to the console with the console.log function and parameters, or I could use them in another function.