jQuery .each() Method

Posted in jQuery Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 73 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

jQuery is renowned for its simplicity and efficiency in handling DOM manipulation and traversal. Among its many methods, the .each() method stands out as a versatile tool for iterating over elements in a jQuery object. Understanding and mastering the .each() method can significantly enhance your ability to work with collections of elements in jQuery.

In this guide, we'll explore the usage of the jQuery .each() method with clear examples to help you grasp its power and versatility.

🧠 Understanding .each() Method

The .each() method in jQuery is used to iterate over a jQuery object, executing a function once for each matched element. It provides a concise and effective way to perform operations on each element within a collection.

💡 Syntax

The syntax for the .each() method is straightforward:

syntax.js

Copied

$.each(collection, function(index, value) {
    // Code to be executed for each element
});

Here, collection is the jQuery object or array-like object to iterate over, index is the index of the current element being processed, and value is the value of the current element.

📝 Example

Iterating Over DOM Elements:

Suppose you have a list of elements and you want to perform an action on each element. You can achieve this using the .each() method as follows:
index.html
Copied
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```
example.js
Copied
```
$("li").each(function(index) {
  console.log("Item " + (index + 1) + ": " + $(this).text());
});
```
This will log each list item along with its index to the console.
Manipulating Attributes:

You can use the .each() method to manipulate attributes of elements within a collection. For example, let's add a class to all <a> elements with a specific attribute:
index.html
Copied
```
<a href="#" data-category="tech">Link 1</a>
<a href="#" data-category="food">Link 2</a>
<a href="#" data-category="tech">Link 3</a>
```
example.js
Copied
```
$("a").each(function() {
  if ($(this).data("category") === "tech") {
      $(this).addClass("tech-link");
  }
});
```
This will add the class tech-link to the first and third <a> elements.
Summing Values:

You can also use the .each() method to perform calculations or aggregations. Let's calculate the sum of values in an array:
example.js
Copied
```
var numbers = [1, 2, 3, 4, 5];
var sum = 0;

$.each(numbers, function(index, value) {
  sum += value;
});

console.log("Sum:", sum);
```
This will output the sum of all numbers in the array.

🎉 Conclusion

The jQuery .each() method is a powerful tool for iterating over collections of elements, enabling you to perform actions, manipulate attributes, and aggregate values with ease. Whether you're working with DOM elements or arrays, mastering this method can streamline your jQuery code and enhance your productivity.

By incorporating the .each() method into your development toolkit, you can write cleaner, more efficient code for handling complex tasks in jQuery.