Jquery Each: 7 Coding Examples That You Can'T Miss As A Developer

You will now learn all the ways lớn use the jQuery Each method from this tutorial. This is the most complete guide to master this method.

Bạn đang xem: Jquery each: 7 coding examples that you can't miss as a developer

The best part?

I’m going to show you 7 ways lớn use jQuery Each method in your trang web.

In short: if you want khổng lồ implement .each() method, then you’ll love sầu this guide.

Let’s get started.


The jQuery .each() function is used lớn iterate over each element of an Object, array like Objects và arrays. It can also be used lớn loop over DOM elements.

jQuery each() Syntax

$(selector).each(function(index,element))

ParameterDescription
function(index,element)A required function khổng lồ run for each matched element. 

index – The index position of the selector.element – The current element of the selector.

Let’s iterate over all the anchor tags in a page, & extract their href attribute’s value.

$("a").each(function (index, value) console.log("anchor" + index + ":" + $(this).attr("href"));); When executing the above sầu code in a web page, it gives the following output.

*

Notice: In the above code I use the jQuery each this object to refer the current element và get it’s values.

The jQuery each method can be also used lớn iterate over arrays, objects and array lượt thích objects.

In this case, the object to loop over, is given as the first argument, like shown below:

$.each(object, function (index, value)//code);Let us examine the different examples of jQuery each function:

1. jQuery Each Array Example

Iteration over an array can be doing easily with the each() method. See the below code:

var names = <"yogi","john","gia","michael","czar">;$.each(names , function (index, value) console.log("Array Current Index is: "+ index + " :: Value is: " + value););Output:Array Current Index is: 0 :: Value is: yogiArray Current Index is: 1 :: Value is: johnArray Current Index is: 2 :: Value is: giaArray Current Index is: 3 :: Value is: michaelArray Current Index is: 4 :: Value is: czar


Do you want lớn make high chất lượng AJAX features in your website. Then take my advice, learn jQuery AJAX function now by visiting this tutorial.

2. jQuery Each For Loop Example

You can use the jQuery Each method instead of the For Loop. Let’s find out how it is possible.
The For Loop Example

var allDiv = $("div"); for ( var i=0; iThe above sầu for loop iterates over every div element in the page. This can be done by the .each() method also.

$("div").each(function(index,value) //$(this) for accessing each of them);
jQuery Each Chaining Example
You can bởi vì the chaining of the .each() method, and this is not possible with the for loop. See the below code which sets the background khổng lồ purple color, for every odd paragraph element.

$("p").each(function (index, value) // for all paragraph).filter(":odd").each(function (index, value) $(value).css("background-color", "purple"); // Or $(this).css("background-color", "purple"););

*

ADS – Find all the info that you need about ” dentist albert park dentistportmelbourne ” at https://dentistportmelbourne.com.au

3. jQuery Each JSON Example

Use jQuery Each khổng lồ iterate over JSON and extract information from it.

In the below code I will show how khổng lồ extract Country name and their capitals from a JSON.

Xem thêm:

var json = < "US": "Washington DC" , "India": "New Delhi" , "China": "Beijing" , "Japan": "Tokio" >;$.each(json, function (index, value) $.each(this, function (index, value) console.log(index + " :: " + value); ););

*
I used a nested .each() for extracting information from the varaible’s value (which is a JSON). The outer .each() loops through each JSON object while the inner one gets their values.

4. jQuery .each() XML Example

jQuery .each() lets you to iterate over XML files too. Let us see an example.

I have sầu an XML that contains countries and their capitals.

US Washington DC India New Delhi China Beijing nhật bản Tokio To extract country names và their capitals from it, you use jQuery .each() method lượt thích this:

var xml = "USWashington DCIndiaNew DelhiChinaBeijingJapanTokio"; $(xml).find("country").each(function (index, value) console.log($(this).find("name").text()+ " :: " + $(this).find("capital").text()););In this example I have sầu used .find() method khổng lồ find the country node in the XML. Then I am iterating over each of them with .each() method. Inside the .each() blochồng, I extracted the name và capital using .find() method.

*

5. jQuery .each() Class Example

Elements which are assigned a certain class can be iterated with the jQuery each method.

Suppose the website page has some paragraph (p elements) that contains ‘script’ và ‘language’ classes, as shown by the below code:

HTML:

jQuery

C#

JavaScript

To select all the p elements having class script, I can use the jQuery each method like:

$(".script").each(function (index, value) console.log($(this).html()));It will give the strings – jQuery và JavaScript only và not C#.

*

6. jQuery .each() Animation Example

Use jQuery Each for creating rich animation effects. In the below example there are 3 blocks, on clicking the button I toggle their width with easing animation effect.

I also applied index-dependent delay of 800 milliseconds on each of them (0,800, 1600 milliseconds).

This gives me eye pleasing toggling animation effect.

The 3 blocks are:


The jQuery Code for this:

$(".block").each(function (index, value) $(this).delay(index * 800).animate( width: "toggle" , "easing"););

7. jQuery .each() Arithmetic Addition Example

Addition of numbers in an array can be performed with jQuery .each method like:

var sum=0;var numbers = <10,trăng tròn,30,40,50>;$.each(numbers , function (index, value) sum=sum+value;);Console.log(sum); I took a sum variable, then iterated over the numbers array and kept on adding them lớn the sum variable. Finally outputting the sum at the end.


It is not necessary lớn wait for the whole loop khổng lồ exedễ thương. You can break out of the loop by using the return false; statement.

Suppose you are searching for a name in an array of strings. You use the jQuery Each method for looping, once you find your name you can get out of the loop with return false;.

var search = "michael"; var loopValue = "";var names = <"yogi", "john", "gia", "michael", "czar", "jack", "cara", "sofie">;$.each(names, function (index, value) loopValue += "Index: " + index + " :: " + "Value: " + value + ""; if (search == value) return false;);I am searching name ‘michael’, for this, I am checking each name with an if statement. When found, I am coming breaking out of the loop through the return false; statement.

The output which I get here is given below:

*

It clearly shown the loop is executing till the index number 3 và then coming out.

DEMO DOWNLOAD

jQuery Each – My Final Words

The jQuery Each method is such a valuable method và you can use it lớn make your code much shorter và smarter.


Do you have sầu any question? Use the comments section lớn reach out lớn me. Let your friends know about this method so kindly nội dung this tutorial on your social accounts, sharing links given below.