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

 

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..