Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery jQuery.each() Method

Posted in jQuery Tutorial
Updated on Nov 21, 2024
By Mari Selvan
👁️ 32 - Views
⏳ 4 mins
💬 1 Comment
jQuery jQuery.each() Method

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
Copy To Clipboard
$.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

  1. 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
    Copy To Clipboard
    $("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.

  2. Iterating Over Arrays:

    You can also use the .each() method to iterate over JavaScript arrays:

    example.js
    Copied
    Copy To Clipboard
    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.

  3. Iterating Over Object Properties:

    The .each() method can iterate over object properties as well:

    example.js
    Copied
    Copy To Clipboard
    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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy