# How to use jQuery.each
In this short tutorial, we’ll show you how to iterate through a group of elements and perform actions using jQuery.each().
## What is jQuery.each()?
JQuery.each() is a method from the JavaScript library jQuery. It’s used to **iterate over a collection of elements**, such as arrays or objects, and perform certain actions. This makes .each() very useful for manipulating the [Document Object Model (DOM)](https://www.ionos.ca/digitalguide/websites/web-development/an-introduction-to-the-document-object-model-dom/ "An introduction to the Document Object Model (DOM)"), which is an interface between HTML and JavaScript. In our [jQuery-tutorial](https://www.ionos.ca/digitalguide/websites/web-development/jquery-tutorial-introduction-and-first-steps/ "jQuery tutorial: introduction and first steps"), you can learn how to embed the popular library.
## What is the syntax for jQuery.each()?
With .each(), every element in a collection is iterated and one function is executed per iteration. There are two kinds of .each(). The basic syntax looks like this:
```jQuery
$.each(object, callback)
```
Here, “object” is an array or object, and “callback” is the function that is called in each pass. Its parameters consist of the **index or element key and the element itself**. The indexing of the elements in an array starts at 0.
In the next example, all elements in the “arr” array are executed. In each iteration, the index and the value are output to the console.
```jQuery
var arr = ["blue", "yellow", "red"];
$.each(arr, function(index, value) {
console.log(index + ": " + value);
});
```jQuery
The output looks like this:
```jQuery
0: blue
1: yellow
2: red
```
To select DOM elements, use .each() with [jQuery selectors](https://www.ionos.ca/digitalguide/websites/web-development/jquery-selectors/):
```jQuery
$(selector).each()
```
Next, all list elements from the unsorted “alphabet” list are selected and their position as well as their content are displayed via the console. The **keyword “this”** refers to the element.
```jQuery
```
```jQuery
$("li").each(function(index) {
console.log( index + ": " + $(this).text() );
});
```
The output looks like this:
```jQuery
0: a
1: b
2: c
```
## jQuery.each() examples
jQuery.each() can be used to perform complex DOM manipulations.
Note Since some jQuery methods also iterate over all elements of a collection, it may make sense to use an implicit iteration instead of .each() in some cases.
To add the same class name to all div elements, you can use the function [.addClass()](https://www.ionos.ca/digitalguide/websites/web-development/jquery-addclass/) in combination with .each():
```jQuery
```
```jQuery
$("div").each(function() {
$(this).addClass("container");
});
```
The output looks like this:
```jQuery
```
The same code can be shortened by implicit iteration:
```jQuery
$("div").addClass("container");
```
.each() is especially useful for JavaScript events. In the next example, a click event changes the color of the div elements. Optionally, the **code can be directly embedded in the script tag of the HTML document**. Initially, the color of the containers is set to “green”. When a click happens in the document, the condition is evaluated, and the color value changes to “red”. With another click, the property “color” is assigned back to the default “green” value again.
```jQuery
Demo
Click here
to change
the color.
hash_7df483a98a4f9086f60260a89e0fd4f705559774
```
In addition, you can use jQuery.each() to create transitions or animations. In this example, the elements in the “numbers” list receive a blue background color on a click event and are then faded out one after the other according to an index-based time interval.
```jQuery
```
```jQuery
$("#numbers").on("click", function(e) {
$("li").each(function(index) {
$(this).css("background-color", "blue")
.delay(index * 300)
.fadeOut(2000);
});
e.preventDefault();
});
```
This is a markdown version of: [https://www.ionos.ca/digitalguide/websites/web-development/jquery-each/](https://www.ionos.ca/digitalguide/websites/web-development/jquery-each/) for AI/LLM consumption.