Using $(array).each to iterate over array

Question

I recently came upon a jQuery construction I hadn't seen before. Here's a simplified version:

$([ '1', '2', '3' ]).each( function( index, value ) {
  console.log( "index", index, "value", value );
});

This iterates over all the elements of the array [ '1', '2', '3' ]. The thing is, I'm used to seeing $(...) used with a CSS selector, but I haven't seen it used on a newly declared array, as is being done here. It seems to work, though (tested with Firefox 34 and Chromium 39).

Q1: Am I correct in understanding that this is equivalent to

var a = [ '1', '2', '3' ];
for ( var i = 0, value; value = a[i]; i++ ) {
  console.log( "index", i, "value", value );
}

If not, what are the differences? (apart from the fact that this declares variables a, i and value).

Q2: As far as iterating over arrays in jQuery is concerned, I'm more used to $.each (not to be confused with $(selector).each as used above). Would the above be equivalent to

$.each( [ '1', '2', '3' ], function( index, value ){
  console.log( "index", index, "value", value );
});

if yes, why are there two such extremely similar constructions in jQuery? Between the two, what is the preferred way to iterate over arrays, or is this just a matter of personal style?

You can do $([ '1', '2', '3' ]).each. This will create a jQuery object that instead of containing DOM elements, will contain strings. You shouldn't do it that way, though. If you want to use jQuery, then you should do $.each( [ '1', '2', '3' ]. This is equivalent to doing var a = [ '1', '2', '3' ]; a.forEach(function(v, i){});, as it's running a callback (closure) for each element. — gen_Eric
– gen_Eric, Commented Jan 5, 2015 at 16:53
According to the doc, $.each() is generic and $().each() is for jQuery objects — sodawillow
– sodawillow, Commented Jan 5, 2015 at 16:56
It should be noted that using jQuery on plain arrays is not really neccessary at all, as all modern browsers support the native forEach — adeneo
– adeneo, Commented Jan 5, 2015 at 17:06
$.fn.each() calls internally $.each() so there is no difference between both except the correct intend to use one or the other — A. Wolff
– A. Wolff, Commented Jan 5, 2015 at 17:09

Tomalak · Accepted Answer · 2015-01-05 16:56:07Z

4

Q1. Yes.

Q2. jQuery accepts arrays (and array-like objects) and turns them into jQuery objects.

You can see that easily by issuing, on the browser console:

console.dir($([ '1', '2', '3' ]))
> VM199:2 e.fn.e.init[3]

That's a jQuery object that call returns. They can be iterated over with .each(). This facility is meant to enable you to do this (contrived example):

$(document.getElementsByTagName("A")).each(func);

Doing so with a plain array of strings works, and will likely continue to work in the future, however I still see that as a mis-use of the API and would recommend the proper approach:

$.each(['1', '2', '3' ], func);

answered Jan 5, 2015 at 16:56

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karl-André Gagnon · Accepted Answer · 2015-01-05 17:03:11Z

Q1: As other said, yes.

Q2: Ill start by saying not because you can that you should.

It is right that you can use $([ '1', '2', '3' ]).each() and it will work, but it isn't efficient.

Both are not the same (they are similar though). As said in the jQuery doc:

The $.each() function is not the same as $(selector).each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is an object or an array.

Which mean that if you use $([ '1', '2', '3' ]).each() you are creating a jQuery object which is not needed. It is way faster, performance wise, the property each of the jQuery object then calling the function passing an array than calling a function creating a jQuery object of an array and then access to its prototype .each().

Collectives™ on Stack Overflow

Using $(array).each to iterate over array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related