Difference between $.each(selector) and $(selector).each()

In jQuery, there is an object iterator utility called $.each() as well as a jQuery collection iterator: .each() to run for each matched element.

We can return false to stop the loop early.

Syntax:

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

Basically, $.each() is essentially a drop-in replacement of a traditional for or for-in loop.

So, .each is an iterator which is used to iterate over only jQuery objects collection where as jQuery.each or $.each is a general function for iterating over JavaScript arrays and objects.

See jQuery reference for more details.

Example of JavaScript arrays and objects using $.each():

var myArr = [1,2,3];

jQuery.each( myArr, function(i, v) {

console.log(‘Element at index ‘ + i + ‘ is ‘ + v);

});

// Output
element at index 0 is 1
element at index 1 is 2
element at index 2 is 3

Example of jQuery objects collection using .each():

<div id=”myDiv”>

<input type=”text” id=”txt” name=”txt” value=”100″ />

<span>This is span</span>

<p>This is paragraph</p>

</div>

$(‘#myDiv’).children().each(function(index, element) {

console.log(‘Element at index ‘ + index + ‘ is ‘ + (this.tagName));

});

// Output
Element at index 0 is INPUT
Element at index 1 is SPAN
Element at index 2 is P