在jquery插件中链接非jquery方法

Question

Let's say I write a jquery plugin that has a method that adds two values and sets the html to that value. I can chain it one way, but not the other and I want to understand why, and how I can make sure I can chain both ways.

$.fn.foo = function() {
    this.result = 0;

    this.doMath= function(a, b) {
        this.result = a + b;
        this.html(this.val);
        return this;
    }

    return this;
}

var link = '<a href="#">Link</a>'
// works as expexted
var a = $(link).foo().doMath(1,2).appendTo('body')
// does not work, likely because appendTo returns jquery
var b = $(link).foo().appendTo('body').doMath(1,2)

https://jsfiddle.net/j7ut1f30/1/

Answer 1

After 2 weeks of trying everything, I finally acheived my goals.

class $Util {

    static $wrapper(self) {
        if (!self.$wrapper)
            throw new ReferenceError('$Util.$wrapper: $wrapper not defined in context of first argument');
        $.each($Util.jqueryPrototype, function(i, e) {
            self[e] = function() {
                self.$wrapper[e](...arguments);
                return self;
            }
        });
    }
}

$Util.jqueryPrototype = Object.getOwnPropertyNames($.prototype);

class foo {
    constructor() {
        this.$wrapper = $('p')
        $Util.$wrapper(this);
        return this;
    }
    test() {
        console.log('j')
        return this;
    }
}
var s = new foo();
s.css('color', 'red').test().appendTo('body').test().css('color','green')

https://jsfiddle.net/24r6uxs1/