Iterating an associative array with jQuery .each

Question

Probably the most contributing factor for this question is that I am extremely sleepy right now.

I have an array, which I initiate:

var cells = [];

Then i put some values in it (jQuery objects), for example:

$("td").each(function () {
  var td = $(this);
  cells[td.attr("id")] = td;
});

And now my problem. This code:

$(cells).each(function (i) {
  console.log(this) // firebug console
});

logs absolutelly nothing. When i changed the associative array to a normal, number index one by substituting

cells[td.attr("id")] = td;

with

cells.push(td);

It worked correctly.

Also, when I try to iterate with the for..in loop it works as expected.

for (var cell in cells) {
  console.log(cells[cell]);
}

Doeas that mean that jQuery's .each method does not accept associative arrays or am I doing something wrong?

Answer 1

JavaScript does not have associative arrays. It has Arrays and it has Objects, and arrays happen to be objects. When you do this:

var a = [];
a['foo'] = 'bar';

..you're actually doing the equivalent of this:

var a = [];
a.foo = 'bar';
// ^--- property of object 'a'

That is to say you're actually adding a property called foo to the object a, not adding an element to the array a.

From the documentation for jQuery.each():

Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.

Since you created an Array ([]) jQuery looks at its length property, and since you have not added any elements to the array (only properties on the object, remember) its length is still zero and so jQuery (correctly) does nothing.

What you want to do instead, as others have noted, is create an Object using e.g. var cells = {};. Since a non-Array object has no length property (not by default, anyway) jQuery will know that you really want to iterate over its properties instead of numeric indices as in an Array.

Answer 2

You seem to be thinking Javascript's arrays are associative, which is not the case. You're probably looking for objects (or hashes) instead:

var cells = {};         // Not [].
$("td").each(function() {
    var td = $(this);
    cells[td.attr("id")] = td;
});

$.each(cells, function() {
    console.log(this);  // This should work as expected.
});