Javascript inheritence in jquery way

Question

If I set a function under an object i can use it once only like

function handle(selector)
{
    return{
        elem:selector,
        next:function(){
            return (this.nextSibling.nodeType==1) ? this.nextSibling : this.nextSibling.nextSibling;
        }
    }
}

here i can say handle.next() this will work but if I want to say handle.next().next().next() my question is how I can use in this way as jquery does?

Define a class, and have all your functions return instances of the class. — Barmar, Apr 06 '15 at 21:14
More information about fluent interface http://en.m.wikipedia.org/wiki/Fluent_interface — Sergey, Apr 06 '15 at 21:19

Yauheni Leichanok · Accepted Answer · 2015-04-06T22:05:05.260

1

Speaking about your function you can modify it like this to make it work:

function handle(selector)
{
    if (typeof selector === 'string') {
        selector = document.querySelector(selector);
    }
    return{
        elem:selector,
        next:function(){
            return handle(selector.nextElementSibling);
        }
    }
}

See jsfiddle.

UPD: Modified the code to support both elements and string selectors as a parameter.

UPD 2: Came out with an alternative variant. In this case we extend the native html element object and add new next method:

function handle(selector)
{
    if (typeof selector === 'string') {
        selector = document.querySelector(selector);
    }
    selector.next = function() {
        return handle(selector.nextElementSibling);
    };
    return selector;
}

Fiddle is here.

edited Apr 06 '15 at 22:05

answered Apr 06 '15 at 21:19

Yauheni Leichanok

1,759
1
21
30

when i say handle("p").next().next().innerHTML returns undefined – nikoss Apr 06 '15 at 21:34
Fixed: now you can either pass *p* or *document.querySelector('p')* as a parameter. – Yauheni Leichanok Apr 06 '15 at 21:39
still innerHTML is undefined it doesnt work this way @YauheniLeichanok – nikoss Apr 06 '15 at 21:54
Have you tried *handle('p').next().elem.innerHTML*? Basically we have a reference to the current element in *elem* variable. – Yauheni Leichanok Apr 06 '15 at 21:55
handle is supposed to return an element node in this case why i cant reach inner html property directly @YauheniLeichanok – nikoss Apr 06 '15 at 22:04
@nikoss Updated my answer, check it out. – Yauheni Leichanok Apr 06 '15 at 22:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74590/discussion-between-yauheni-leichanok-and-nikoss). – Yauheni Leichanok Apr 06 '15 at 22:08

Javascript inheritence in jquery way

1 Answers1