How does jQuery allow you to use [] for a jQuery object?

Question

Say I had the following markup:

<div></div> <div></div> <div></div> 

And to get them I use the following:

 var divs = $('div'); 

How is it possible that I can get the corresponding DOM element using the syntax [] , and also be able to call methods on a jQuery object such as .first() ?

 var div_one = divs[0]; 

I ask this question because it seems to me that divs is a jQuery object , not a true JavaScript Array object.

How it works?

Answer 1

Numeric indices are just the properties of the returned object. It looks like this:

 var obj = {}; obj[0] = 'foo'; alert(obj[0]); 

Arrays and pseudo-array objects are almost identical - the only difference is that the length property of the true array is automatically controlled by the JavaScript engine.

Answer 2

You can do this with any object. Actually, this has nothing to do with the fact that it is an Array-like object.

 var myObj = {}; myObj[0] = 'some value'; alert( myObj[0] ); 

---

Here is an example of creating an object like Array:

Example: http://jsfiddle.net/8rgRM/

  // create constructor function MyObj(){} // extend it with an Array method MyObj.prototype.push = Array.prototype.push; // create an instance var inst = new MyObj; // use the push method inst.push( 'some value' ); // the instance automatically has a length property that was updated alert( inst.length ); 

It may seem tempting that the length property will behave the same as in a real array, but it is not.

For example, with an array, you can do length = 0 to clear the contents of the array, but it will not work in an object like the above.

In the jQuery source, here is a link to Array.prototype.push and here where it is extended in the jQuery prototype.

Answer 3

This will clarify the situation a bit. Try and play with it.

 //used to produce pure classical inheritance function clone(obj){ function F(){}; F.prototype=obj; return new F(); } // Constructor function, used to instantiate a new object of myDivQuery Class myDivQuery = function (){ var div_list = document.getElementsByTagName('div'); for (var i=0; i < div_list.length; i++){ this[i] = div_list[i]; } this.length = div_list.length; }; //myDivQuery inherits from Array class myDivQuery.prototype = clone( new Array ); //add new methods to myDivQuery class, which is not added to the orginal Array class myDivQuery.prototype.first = function (){ return this[0]; } myDivQuery.prototype.last = function (){ return this[this.length - 1] } divs = new myDivQuery(); divs[0]; // first div on the page; divs[1]; // the second div on the page .... divs instanceof Array; //true divs instanceof myDivQuery; //true divs.first() === divs[0]; //true divs.last(); //last div on page Array.prototype.first; //undefined divs.slice(1); //but still can use array methods divs.reverse(); //another array method 

here is how you create a pseudo-array, one huge remark: arrays in javascript cannot be subclassed, i.e. cannot create an auxiliary array with the same array functions, the main reason for this is the behavior of length in the array, which is hidden from the JS programmer, but there are many hacks and workarounds for this, to learn more by reading this brilliant kangax article. http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/

Answer 4

In JavaScript, you can access the properties of objects using the same syntax used to indicate the index of an array:

 var o = {'foo':'bar'}, fooVar = 'bar'; //these all alert 'bar' alert(o.foo); alert(o['foo']); alert(o[fooVar]); 

However, you can only use dot notation for valid names. o[0] works, but o.0 does not work.

jQuery returns a jQuery.init object that contains a number of properties (i.e. length ), as well as a map of dom elements or other raw javascript objects corresponding to the selector specified in 0 to n .

Answer 5

The selector result ( $("div") at the beginning of the message) returns a result of type jquery

To quote on a jquery page:

The jQuery object itself behaves very much like an array; it has the length of the property and elements in to the object can be numerical indices [0] - [length-1]. Note that the jQuery object is not actually a Javascript Array object, so it does not have all the true methods of an Array object, such as join ().