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

Switch List Grid View

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

Also Read:

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

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.

You may like:  jQuery data attributes

Leave a Reply

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