7

I'm just getting into jQuery and I am having problems understanding what it is. How can I use array style indexing on a jQuery object but jQuery not be an array? Is this a javascript thing?

<ul id="myUL">
<li></li>
<li id="second"></li>
<li></li>
</ul>

var jqueryObject = $("#myUL > li");
alert(jqueryObject[1].attributes.getNamedItem("id").value);

if (jqueryObject instanceof Array) {
    alert('value is Array!');
} else {
    alert('Not an array');//this is what pops up
}
enamrik
  • 2,292
  • 2
  • 27
  • 42
  • If you have Chrome installed, open up the javascript console on this page and enter: var foo = $("div"); console.log(foo); Take a look at the returned object. It might help. – Kevin Ennis Apr 29 '11 at 02:30
  • This just gives me an array of divs (didn't know I could do that in Chrome!). I don't see where it indicate how jQuery mimics array indexing. – enamrik Apr 29 '11 at 02:50

4 Answers4

7

A jQuery collection is an Object with properties numbered like Array indexes (and some other properties and methods), each holding one of the matched elements. It is also given a length property to tell you how many elements the selector matched. See http://api.jquery.com/Types/#jQuery

Also, yes, it is partly a JavaScript thing--JS lets you access an object's properties with dot notation or with square-bracket notation.

JAAulde
  • 19,250
  • 5
  • 52
  • 63
  • Sorry but I'm having problems picturing what you're saying. Are you saying jQuery is like jQuery.0="value", jQuery.1="value"? – enamrik Apr 29 '11 at 02:26
  • No. `jQuery()` or `$()` is a function which returns a jQuery collection object. This object was built to have some array like properties, but is not an Array. `var myDivCollection = $( 'div' ); //myDivCollection now holds a collection object with all DIV tags from the page in the structure described in the link I put in my answer` – JAAulde Apr 29 '11 at 02:29
  • Sorry, I'm a little slow sometimes but I just got it: jqueryObject["2"]="value";//creates a property called 2 alert(jqueryObject[2]); //displays "value" – enamrik Apr 29 '11 at 02:40
  • Slowness is ok. :) So you have it under control now? – JAAulde Apr 29 '11 at 02:41
  • Well I'm looking at the dev version of jQuery to see if I see numbers being added as properties on the jQuery object and being assigned html elements as values. If I see that then I know I finally got it – enamrik Apr 29 '11 at 02:45
  • Okay so it's confirmed. In the jQuery code, I saw code like this[0]=element where 'this' is the actual jQuery object. Also learnt that this[0] doesn't mean property at index zero of an array of properties. it actually means property named 0. So if I have var jsObject.four = "value", jsObject[0] IS NOT equal to "value", jsObject[0] is undefined. – enamrik Apr 29 '11 at 04:25
  • That they are collections mean that you cannot use array methods that jQuery didn't implement in its collections. Take elements = $(selector1).find(selector2). A console.log will show [Object,Object,Object]. However, you cannot use elements.pop() or elements.shift(). It looks like an Array, behaves to some extent like an Array, but is not an actual Array type. – widged Jan 14 '13 at 11:58
5

Per docs, no:

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

ndp
  • 21,546
  • 5
  • 36
  • 52
1

jQuery collection wrapper is an Object in JS sence.

JS objects have operator[] that in general can accept any type as an index. So these statements are valid:

var obj = {};
obj[0] = element1;
obj[1] = element2;
//...
obj[10] = element10;
// and yet
obj[false] = someValue1;
obj[true] = someValue2;
// and obviously 
obj["first"] = 1; // equivalent (but not exact) of obj.first = 1;
obj["second"] = 2;

In short object is a key/value map where key can be of any type.

c-smile
  • 26,734
  • 7
  • 59
  • 86
0

It isn't. But if you wanna use JS Array methods, like .join() after a $(...).map(...) call, you can use the $.makeArray that converts a jQuery collection to a true JS Array:

http://api.jquery.com/jQuery.makeArray/

lmcarreiro
  • 5,312
  • 7
  • 36
  • 63