5 jQuery.each() Function Examples

5 jQuery

< img src =" https://websitedesign-usa.com/wp-content/uploads/2020/05/5-jquery-each-function-examples.png" class= "ff-og-image-inserted" > This is a comprehensive introduction of the jQuery.each () function– among jQuery’s crucial and a lot of utilized functions. In this short article, we’ll discover why and have a look at how you can utilize it.This popular post was upgraded in 2020 to show present finest practices and to upgrade the conclusion’s recommendations on native services utilizing modern-day JavaScript. For more thorough JavaScript understanding, read our book, < a href=" https://www.sitepoint.com/premium/books/javascript-novice-to-ninja-2nd-edition?utm_source=blog&utm_medium=articles" > JavaScript: Amateur to Ninja, second Edition.

What is jQuery.each()

jQuery’s each() function is utilized to loop through each component of the target jQuery things– a things which contains several DOM aspects, and exposes all jQuery functions. It’s really helpful for multi-element DOM control, along with iterating over approximate selections and things homes.

Function, jQuery offers an assistant function with the exact same name that can be called without having actually formerly picked or produced any DOM aspects.

jQuery.each() Syntax

Let’s see the various modes in action.

The copying picks every << div > aspect on a websites and outputs the index and the ID of each of them:

$(' div'). each( function( index, worth) console.log(' div$ : $ this.id ');. )

A possible output would be:

div0: header.
div1: primary.
div2: footer.

This variation utilizes jQuery's $( selector). each() function, instead of the energy function.

The next example reveals using the energy function. In this case the challenge loop over is offered as the very first argument. In this example, we'll demonstrate how to loop over a selection:

const arr = [' one', '2', '3', '4', '5'.
]; $. each( arr, function( index, worth) Will stop following "3" return (worth!== '3');. )
;// Outputs: one 2 3.

In the last example, we wish to show how to repeat over the homes of a things:

const obj = one: 1, 2: 2, 3: 3, 4: 4, 5: 5.
; $. each( obj, function( secret, worth) )
;// Outputs: 1 2 3 4 5.

This all come down to offering an appropriate callback. The callback's context, this, will amount to its 2nd argument, which is the present worth. Considering that the context will constantly be a things, primitive worths have actually to be covered:

$. each( one: 1, 2: 2, function( secret, worth) console.log( this);. )
;// Number // Number 2


This implies that there's no stringent equality in between the context and the worth.

$. each( , function( secret, worth) console.log( this == worth); console.log( this === worth);. )
;// real.
// incorrect.


The very first argument is the existing index, which is either a number (for ranges) or string (for things).

1. Standard jQuery.each() Function Example

Let's see how the jQuery.each() function assists us in combination with a jQuery things. The very first example chooses all the a components in the page and outputs their href quality:

$(' a'). each( function( index, worth) console.log( this.href);. )

The 2nd example outputs every external href online page (presuming the HTTP( S) procedure just):

$(' a'). each( function( index, worth) )

Let's state we had the following links on the page:

<< a href=" https://www.sitepoint.com/>" > SitePoint MDN web docs<.< a href=">http://example.com/">>

Example Domain. The 2nd example would output: https://www.sitepoint.com/. https://developer.mozilla.org/. http://example.com/.

We ought to keep in mind that DOM components from a jQuery item remain in their "native" type inside the callback passed to jQuery.each(). The factor is that jQuery remains in truth simply a wrapper around a variety of DOM components. By utilizing jQuery.each(), this range is repeated in the very same method as a regular range would be. We do not get covered components out of the box.

With referral to our 2nd example, this suggests we can get an aspect's href quality by composing this.href. If we wished to utilize jQuery's attr() approach, we would require to re-wrap the aspect thus: $( this). attr(' href').

2. jQuery.each() Selection Example

Let's have another appearance at how a normal selection can be managed:

const numbers = [1, 2, 3, 4, 5];.
$. each( numbers, function( index, worth) )

This bit outputs:


Absolutely nothing unique here. A selection includes numerical indices, so we get numbers beginning with 0 and increasing to N-1, where N is the variety of components in the variety.

3. jQuery.each() JSON Example

We might have more complex information structures, such as varieties in varieties, things in items, selections in items, or things in selections. Let's see how jQuery.each() can assist us in such situations:

const colors = ['red': '#f 00', , 'blue': '# 00f'
]; $. each( colors, function() $. each( this, function( name, worth) );. )

This example outputs:

red = #f 00.
green = # 0f0.
blue = # 00f.

We manage the embedded structure with an embedded call to jQuery.each(). The external call manages the range of the variable colors; the inner call manages the private items. In this example each item has just one secret, however in basic, any number might be taken on with this code.

4. jQuery.each() Class Example

This example demonstrates how to loop through each component with appointed class productDescription given up the HTML listed below:

<< div class=" productDescription">> Red< div>>
 Orange< div class=" generalDescription" > Teal< div class=" productDescription>" > Green

We utilize the each() assistant rather of the each() approach on the selector.

$. each($('. productDescription'), function( index, worth) console.log( index + ':' + $( worth). text());. )

In this case, the output is:

0: Red.
1: Orange.
2: Green.

We do not need to consist of index and worth. These are simply specifications that assist identify which DOM component we're presently repeating on. In this situation we can likewise utilize the more practical each approach. We can compose it like this:

$('. productDescription'). each( function() )

And we'll get this on the console:


Keep in mind that we're covering the DOM component in a brand-new jQuery circumstances, so that we can utilize jQuery's text() approach to get the component's text material.

5. jQuery.each() Hold-up Example

In the next example, when the user clicks the aspect with the ID 5demo all list products will be set to orange right away.

<< ul id=" 5demo"> <> One 2

< li > 4< li > 5.. After an index-dependent hold-up( 0, 200, 400, ... milliseconds) we go out the aspect:

$(' # 5demo'). on(' click', function( e) )


In this post, we have actually shown how to utilize the jQuery.each() function to repeat over DOM selections, components and things. It's a time-saving and effective little function that designers need to have in their toolkits.

And if jQuery isn't your thing, you may wish to take a look at utilizing JavaScript's native < a href=" https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" > Object.keys() and< a href=" https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" > Array.prototype.forEach() approaches. There are likewise libraries like foreach which let you repeat over the crucial worth sets of either a dictionary-like item or an array-like item. Keep in mind:$. each() and$( selector). each() are 2 various techniques specified in 2 various methods.

Leave a Reply

Your email address will not be published. Required fields are marked *