Difference Between Dollar Each And Each Method In JQuery
Posted By : Vinay Tiwari | 30-May-2018
In jQuery there are 2 versions of each() method
1). .each()
2). $.each() or jQuery.each()
Please note: $ is the shortcut for jQuery
What is the difference
.each() method is used to iterate over the items in a jQuery object collection whereas $.each() method is used to iterate over javascript objects or arrays.
let's look it an example if we using .each
HTML Code:-
- US
- INDIA
- UK
- CANADA
- AUSTRALIA
jQuery Code:-
$(document).ready(function (){
var result ='';
$(li).each(function (index, element){
result += 'Index = ' + index + ', Value = ' +$(element).text() + '
';
});
$(#resultdiv).html(result);
});
Here, declaration of .each function:-
Here, we have a unorder list & this unorder list contains a few list items. So, looks it a jQuery ready function lets use the selector $(li) this selector is going to return as a jQuery object collection that will contain all the list item. If we want to iterate over all these list items in that jQuery object collection we will use .each function this function got two parameters callback and arguments. This callback parameter represents a function that we want to execute for each item that we are iterating over. This function has two parameters index & element. So, what is this index parameter represents this index parameter represents the index of the item that we are currently iterating over within this collection and the element parameter represents the element itself. So, lets every wants to print the index of the item and the value that is the list item value. let's create a result variable its initialize that empty string and within our jquery each function.
Let's look at an example if we using $.each
when we use $.each to iterate over javascript objects or arrays. let's create javascript array.
$(document).ready(function (){
var intArray = [100, 200, 300, 400, 500];
var result = '';
$.each(intArray (index, element){
result += 'Index = ' + index + ', Value = ' +$(element).text() + '
';
});
$(#resultdiv).html(result);
});
Here, declaration of $.each function:-
Here, we have a javascript array so we are using $.each to iterate over this javascript array. So this function has the first parameter is object or array that we want to iterate over. So, let's pass that intArray so now this $.each function knows what it has to iterate over and the next parameter if the callback function which gets called for each iteration so this is very much similar to the callback function we have in each version i.e .each version it will take two parameters index & element. So, what is this index parameter represents this index parameter represents the index of the item that we are currently iterating over within this collection and the element parameter represents the element itself. So, lets every wants to print the index of the item and the value that is the list item value. let us create a result variable its initialize that empty string and within our jquery each function.
Thanks
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vinay Tiwari
Vinay is a bright UI developer, having knowledge of HTML, CSS, Bootstrap, Jquery and AngularJs. His hobbies are interacting with people, listening music etc.