Creating an object like jQuery

Question

For example, there is an object V which takes an element id, class or a tag name as a parameter and applies functions on it, like so.

var V = function(elem) {
        // logic to getElementBy ID or class or tag name and return it
        if(type === '#') {
            // get by id
            domElem = document.getElementById(elem.slice(1));
        } else if(type === '.') {
            // get by class
            domElem = document.getElementsByClassName(elem.slice(1));
        } else if(typeof type === 'string' && (type !== '#' || type !== '.')) {
            // get by elem type
            domElem = document.getElementsByTagName(elem);
        }
        return domElem;
    }

So now when you get an element, like so: var myDiv = V('#someDivElement'); it will return you the div element. Now, I also run a method on the returned object. For example, I want to run a method asdf that simply appends a paragraph tag inside the div, like so:

V.prototype.asdf = function() {
        this.appendChild('<p>I am an awesome child!</p>');
        return this;
    }

Ideally, it works when I do:

var myDiv = V('#someDivElement');

But the below line doesn't seem to execute.

myDiv.asdf();

What am I doing wrong here?

can you add a demo for your problem ?

Mritunjay
– Mritunjay

2015-03-05 04:17:56 +00:00
Commented Mar 5, 2015 at 4:17 — Mritunjay
– Mritunjay, Commented Mar 5, 2015 at 4:17

PM 77-1 · Accepted Answer · 2015-03-05 04:29:38Z

1

Your V('#someDivElement'); returns domElem, but asdf is defined on prototype of V.

What you might want is the following constructor function:

var V = function(elem) {
        // logic to getElementBy ID or class or tag name and return it
        if(type === '#') {
            // get by id
            this.domElem = document.getElementById(elem.slice(1));
        } else if(type === '.') {
            // get by class
            this.domElem = document.getElementsByClassName(elem.slice(1));
        } else if(typeof type === 'string' && (type !== '#' || type !== '.')) {
            // get by elem type
            this.domElem = document.getElementsByTagName(elem);
        }
    }

var myDiv = (new V('#someDivElement')).domElem;

edited Mar 5, 2015 at 4:29

answered Mar 5, 2015 at 4:23

PM 77-1

13.4k21 gold badges73 silver badges118 bronze badges

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

Comments

Damon Smith · Accepted Answer · 2015-03-05 04:32:19Z

you are defining V as a function that returns a DOM element, then trying to add a method onto V's prototype, then just calling it and getting a value.

But you can only use the prototype when you use V as a class - with the 'new' keyword. So try this:

var V = function(elem) {
    this.elem = document.getElementsByTagName(elem);
    ... plus whatever else here ...
}

V.prototype.asdf = function() {
    this.elem.innerHTML = "Hi Dave";
};

var myElem = new V('.someselectorOrElem');
myElem.asdf();

see how V is no longer used as a function but instead as a class constructor? But.. it's not exactly the answer you're after, you want it to work just like jquery.

So taking the code above, you could, after that, also define a function called, say, $V, which constructs one and returns it, like this:

function $V(selectorOrElem) {
    return new V(selectorOrElem);
}

and call it like this:

var myElem = $V(".someSelector");

then you have jquery-like behaviour.

MehulJoshi · Accepted Answer · 2015-03-05 04:39:13Z

0

What you are returning is simply a plain object from JS now go back and log the real jQuery, It's returning the object of the self that helps in chaining. so you need to wrap the object in your context. that's all.

answered Mar 5, 2015 at 4:39

MehulJoshi

8898 silver badges19 bronze badges

Collectives™ on Stack Overflow

Creating an object like jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related