Get your next remote job on LaraJobs.

Understanding jQuery's .each() method

Understanding jQuery's .each() method

Introduction to jQuery’s .each() method

Ah, jQuery. It’s been a cornerstone of web development for years, offering a simplified way to manipulate the DOM, handle events, and perform AJAX requests. One of its most beloved features? The .each() method. This little gem allows developers to iterate over both arrays and DOM elements effortlessly, applying functions to each item in the set.

Syntax and usage

jQuery’s each method has a straightforward syntax. It takes a function as an argument, which is executed for each item in the set. Here’s a quick look:

$('selector').each(function(index, element) {
// Your code goes here
});

In this snippet, selector targets the DOM elements you want to iterate over. The function then receives two arguments: index, the position of the current item in the set, and element, the item itself.

Practical example

Let’s say we want a Frequently Asked Questions section with only one question open at a time:

$('summary').click(() => {
var parent = $(this).parent('details')
 
$('details').each(() => {
if (! $(this).is(parent)) {
$(this).removeAttr('open')
}
})
})

Not that hard, right? The .each() method comes in handy to find all the details elements and close them, excluding the one we clicked in.

But what if I told you that you could achieve the same thing without jQuery, using just vanilla JavaScript?

The equivalent in Vanilla JavaScript

As web development evolves, so does JavaScript. The modern ECMAScript standards have introduced methods that make DOM manipulation just as straightforward as jQuery once did. For instance, to replicate jQuery’s each method example, you can use forEach on a NodeList.

Here’s our practical example from above, but using Vanilla JavaScript:

document.querySelectorAll('summary').forEach(summary => {
summary.addEventListener('click', () => {
var parent = this.parentNode
 
document.querySelectorAll('details').forEach(details => {
if (details !== parent) {
details.removeAttribute('open')
}
})
})
})

Here, querySelectorAll returns a NodeList of all <details> tags, which we then iterate over with forEach, removing the open attribute from each <details> elements besides the one we clicked on.

Conclusion

While jQuery’s .each() method offers a simple and effective way to iterate over elements, modern JavaScript provides equally powerful alternatives. As developers, staying updated with these advancements allows us to write cleaner, more efficient code. Whether you’re a jQuery enthusiast or a vanilla JavaScript advocate, understanding both approaches enhances your toolkit for web development challenges.

Be the first to comment!

Get help or share something of value with other readers!

Great deals for enterprise developers
The latest community links

Recommended articles

Get started with jQuery in 5 minutes

Dive into the basics of jQuery, learn how to include it in your project, and create your first component in just a few minutes.

How and when to use jQuery's $(document).ready() method

In JavaScript, running code at the wrong time can lead to errors or unpredictable behavior. Let me show you the fix using jQuery.

Handle clicks from your users using jQuery

Dive into the simplicity of handling click events with jQuery and learn how to achieve the same results using vanilla JavaScript.

20+ Laravel best practices, tips and tricks to use in 2024

Learning a framework can be overwhelming, but time and execution will make you a master. Here are some best practices to help you toward your goal.

Fix "Invalid argument supplied for foreach" in PHP & Laravel

Learn why the "Invalid argument supplied for foreach()" warning happens, and let me show you multiple ways to fix it.

Alpine.js: a lightweight framework for productive developers

Smaller and even easier than Vue.js, setting up Alpine.js is as easy as copying and pasting a code snippet.

Laravel interview questions and answers for 2024

Nailing a Laravel job interview can be a daunting task, but with the right preparation and mindset, you can set yourself up for success.

How does Laravel work? A crystal clear explanation.

Discover my step by step and simple explanation of how Laravel makes your life easier.

7 Laravel RESTful APIs best practices for 2024

Master the art of crafting RESTful APIs with Laravel thanks to these best practices.

- / -