How to Loop Through jQuery Objects?

Learning to iterate over jQuery objects using .each() and ($this) is an integral skill for any front-end developer.

Photo by Tine Ivanič on Unsplash

As someone who started his coding career by diving head-first into python, I have always been an admirer of clean and concise code. That is one of the reasons I enjoy using jQuery with it’s concise one-word functions and methods.

jQuery object is an array-like collection returned when new HTML elements are created or existed ones are selected. According to jQuery’s website,

When creating new elements (or selecting existing ones), jQuery returns the elements in a collection. Many developers new to jQuery assume that this collection is an array. It has a zero-indexed sequence of DOM elements, some familiar array functions, and a .length property, after all.

In this step-by-step guide, we will be looking at how to loop through a jQuery object of existing elements using .each() and nesting it with $(this) selector. The official syntax of .each() is as follows, where it takes a function as its argument — the function you want to apply on each element of the jQuery object.

jQueryObject.each(function);

We we will be creating three buttons which, when clicked, toggle between styled and unstyled states. To preview it, head over to the result tab below and try clicking the buttons.

Let’s start by creating three buttons with basic HTML and CSS:

Basic markup for a div wrapped around three anchor tags.

Basic styling for each button.

So far, our buttons have basic styling as shown in the first picture below. To add the class “.button-style” to each button so it matches the ones in the second picture below, we will be using jQuery’s .each() function and $(this) selector.

Buttons without any styling.

Buttons once we add “button-style” class using .each() function.

Now that our workstation is ready, let’s begin with our jQuery/Javascript.

Step 1:

Create a jQuery object which has all the anchor tags inside it by using the selector $(“.[Class Name]”), which in our case becomes $(“.button”). For easy reference, assign the object to a variable, buttonList.

Step 2:

Apply the .each() function on the buttonList which will take another function as it’s argument. We define that function in the next step.

Step 3:

Because we want the magic to happen when we click each button, we have to nest the .click() method inside the function we are passing to the .each() method.

Step 4:

Finally, add the .toggleClass() function as we want the buttons to toggle between styled and not styled. Again, we will be using $(this) selector to apply that function on whichever button is our code on as it is looping through the buttonList.

To summarize it all, we created a jQuery object containing all our buttons. Then, we applied .each() method, inside which the .click() method was responsible for applying the function only when each button is clicked. Lastly, we put the function .toggleClass() inside, to change the button from not styled to styled and vice versa.

I hope this guide helped you realize the power of looping with jQuery. If you have questions or concerns, feel free to ask me in the response section below and I will try my best to respond.

Resources:

1. jQuery’s documentation on .each(), .click(), .toggleClass() and $(this).