Tutorials

jQuery jQuery.each() Method

Posted in jQuery Tutorial

Updated on Nov 21, 2024

By Mari Selvan

👁️ 34 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The jQuery library simplifies JavaScript programming by providing powerful methods for traversing and manipulating HTML elements. One such method is the .each() method, which allows you to iterate over a jQuery object or an array, executing a function for each matched element. Understanding and mastering the .each() method can significantly enhance your ability to work with collections of elements in your web projects.

In this guide, we'll explore the jQuery .each() method in depth, providing clear examples and explanations to help you leverage its full potential.

🧠 Understanding jQuery.each() Method

The .each() method in jQuery is used to iterate over a collection of elements, executing a function for each element in the collection. It is versatile and can be applied to jQuery objects, arrays, and array-like objects.

💡 Syntax

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

syntax.js

Copied

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

Parameters:

collection: The collection of elements to iterate over.
function: A function to execute for each element. It accepts two parameters:
index: The index of the current element in the collection.
value: The value of the current element.

📝 Example

Iterating Over jQuery Objects:

Suppose you have a collection of <li> elements and you want to log their text content to the console using the .each() method:
example.js
Copied
```
$("li").each(function(index, value) {
	console.log("Index: " + index + ", Value: " + $(value).text());
});
```
This will log the index and text content of each <li> element to the console.
Iterating Over Arrays:

You can also use the .each() method to iterate over JavaScript arrays:
example.js
Copied
```
var fruits = ["Apple", "Banana", "Orange"];
$.each(fruits, function(index, value) {
  console.log("Index: " + index + ", Value: " + value);
});
```
This will log the index and value of each fruit in the array to the console.
Iterating Over Object Properties:

The .each() method can iterate over object properties as well:
example.js
Copied
```
var person = { name: "John", age: 30, city: "New York" };
$.each(person, function(key, value) {
  console.log("Key: " + key + ", Value: " + value);
});
```
This will log the key-value pairs of the person object to the console.

🎉 Conclusion

The jQuery .each() method is a powerful tool for iterating over collections of elements, arrays, and object properties. Whether you need to perform actions on each element in a jQuery object, iterate over arrays, or traverse object properties, the .each() method provides a simple and effective solution.

By mastering its usage, you can streamline your JavaScript code and enhance the interactivity of your web pages.