How to return an Array or an Element all from the same Object? (jQuery)

Question

I am trying to cut down jQuery to a very specific set of functions to use in a product (as well as my general learning). Looking through the source, this seems to be the main structure behind the jQuery library. And it works fantastically.

The big part i can't get my head around, is how jQuery can return an element array, as well as retaining the jQuery object.

Ie, $("body") will return the body in an array, but i can still say $("body").hide() (so i'm essentially calling 'hide' on an array?)

The question: How can I return both an Array AND the jQuery object created in the first function?

var MyNewLibrary = function (selector, context) {
    return new MyNewLibrary.fn.init(selector, context);
};

var $$ = MyNewLibrary;

MyNewLibrary.fn = MyNewLibrary.prototype = 
{
    el: null,
    length: 0,
    selector: "",
    init: function (selector, context) 
    {
        var elem;
        elem = document.getElementById(
                selector[0].substr(1, selector[0].length));

        if (elem) 
        {
            this.length = 1;
            this[0] = elem;
        }

        this.context = document;
        this.selector = selector;
        return this;

    },

    //Example of chained function
    Html: function (str) {
        if (typeof str == "string") {
            this[0].innerHTML = str;
        }
        if (typeof str == "undefined") {
            return this[0].innerHTML;
        }
        return this;
    }

};

MyNewLibrary.fn.init.prototype = MyNewLibrary.fn;

MyNewLibrary.BasicFunction = MyNewLibrary.fn.BasicFunction  = function () 
{
    return "A string returned by $$.BasicFunction()";
};

Anurag · Accepted Answer · 2011-04-18 03:09:29Z

2

An array is an object, and an object can have functions, so through transitivity, arrays can have functions. If there are multiple results, keep adding them to the newly created object of your library.

this[0] = element1;
this[1] = element2;
// and so on

It's not exactly an array but an array-like object, with a length property and corresponding numeric indexes. jQuery doesn't return an array either, which can be tested with

$("<some selector>") instanceof Array; // false

However, jQuery always returns this array-like object, even when selecting an element by id. In that case an array-like object (the jQuery object) is returned with a single element in it.

edited Apr 18, 2011 at 3:09

answered Apr 18, 2011 at 2:59

Anurag

142k37 gold badges223 silver badges262 bronze badges

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

4 Comments

jamie-wilson Over a year ago

This works if I call $$("selector")[0] (i get the first element in the array), but if i just write out $$("selector") - i get MyNewLibrary.fn.Moxy.init - not ["matchedElement1", "matchedElement2"] etc

jamie-wilson Over a year ago

Sorry, I just re-read the last part of that. I guess my question then is how does the jQuery object return an 'array-like object' with a single element in it?

Anurag Over a year ago

just like you are doing it in your example. this.length = 1, and this[0] = element.

jamie-wilson Over a year ago

Right, I get it. I've been staring at that way too long! Thanks heaps :)

Collectives™ on Stack Overflow

How to return an Array or an Element all from the same Object? (jQuery)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related