0

Some sources say:

var objectA = jQuery('.someClass'); // returns new instance of jQuery object.

Some say:

var objectA = jQuery('.someClass'); // returns an array of elements with class='someClass'.

If the above statement returns a jQuery object, then how objectA is behaving as an array? Thanks.

Ramson
  • 229
  • 4
  • 12
  • 4
    A jQuery object is an *array-like* object. See http://stackoverflow.com/search?q=%5Bjavascript%5D+array-like – Felix Kling Jun 12 '15 at 20:21
  • 1
    Both statements are true, if you assume they mean an array-like object instead of an array of elements. – Kevin B Jun 12 '15 at 20:43
  • @KevinB I don't agree at all. The only thing I would assume about stating that something is an array, is that you could call Array.prototype functions on it--which you can't on a jQuery object. – Dave Jun 12 '15 at 20:46
  • So you're saying if it instead said an "array-like object of elements..." you'd still disagree with it? My point was if the proper terminology was used in the statement it would be correct. – Kevin B Jun 12 '15 at 20:53
  • If something isn't clear, let me know so I can attempt to provide a better explanation – AmmarCSE Jun 12 '15 at 21:32
  • I agree that if it said array-like instead of array it would be correct. It's just a jump in logic that inexperienced users aren't going to make. – Dave Jun 12 '15 at 21:34
  • If I am not wrong, it returns a new instance of jQuery object by adding the elements ( of .someclass) to it like: `jQuery.fn = { this.elements = elements; };` In that case, we have to access them as - objectA.elements[i]. But I dont understand how come we are able to access as objectA[i]. – Ramson Jun 12 '15 at 21:38
  • @Ramson: Because jQuery internally merges the jQuery object with the array. I.e. it adds all the elements of the array to the object. – Felix Kling Jun 12 '15 at 23:38

1 Answers1

5

objectA behaves as an array in the sense that it can be iterated over and accessed by index. It is a collection of elements with .someClass. Therefore, objectA is array-like

var objectA = jQuery('.someClass');

var first = objectA[0];//first element with someClass

objectA.each(function(){
   //do something with each element that has someClass
});

However, objectA is not a pure js array. Thus, it does not have access to Array.prototype methods. In order to get access to these methods, you will need to use toArray() like

var realArray = objectA.toArray();
realArray.reverse();//now you can use Array.protype methods like reverse()

Finally, it should be noted that when you use toArray, each item in the array is a DOM element and no longer a jQuery object. This can be overcome by wrapping it in $(...) like

$(realArray[0])
AmmarCSE
  • 30,079
  • 5
  • 45
  • 53
  • 3
    Note that when you use `toArray()`, each resulting item in the array is a DOM Element, and no longer a jQuery object. – Dave Jun 12 '15 at 20:38
  • If I am not wrong, it returns a new instance of jQuery object by adding the elements ( of .someclass) to it like: `jQuery.fn = { this.elements = elements; };` In that case, we have to access them as - objectA.elements[i]. But I dont understand how come we are able to access as objectA[i]. – Ramson Jun 12 '15 at 21:36
  • @Ramson, `objectA.elements` is invalid. To prove this, try opening the console in this very page and put `$('div').elements` it will give `undefined`. however, if you do `$('div')` it will give you a collection. Regarding accessing like `objectA[i]`, this is one of the numerous valid ways to access an item by index. See http://stackoverflow.com/questions/9887534/get-an-element-by-index-in-jquery for further detail – AmmarCSE Jun 12 '15 at 21:41
  • Yeah I understood objectA[i] doesn't work. However in which way it is invalid, if my assumption of adding the matched elements to the jquery instance is right (above code snippet), then as far as javascript way of accessing nested objects is concerned, shouldn't that be accessed like objectA.elements[i]? Why it is not working and what jquery is doing internally? How can jquery object acts like an array of matched elements inspite of the fact that it would have lot many funtions, members? – Ramson Jun 12 '15 at 21:49
  • @Ramson, I dont think it works like `jQuery.fn = { this.elements = elements; };` Rather, I think it is more like `jQuery.fn = { return elements; };`. It **returns** the collection thus making indexing like `$('div')[0]` valid because the `[0]` is applied to the **returned** collection – AmmarCSE Jun 12 '15 at 21:55
  • If it doesnt return jquery object but elements collection, how are we able to chain multiple statements like: `$('.elements').hide().css(...); – Ramson Jun 12 '15 at 22:04
  • @Ramson, chaining is done within jquery functions by `return this;` where `this` is the `jQuery.fn` and has access to all the other functions like `hide/css`. When `hide` is called on `this`, I think it internally iterates over all the `.elements` and *hides* them – AmmarCSE Jun 12 '15 at 22:06