Recursion with prototype function

Question

I would like to create a new jQuery function, in which I could pass one or many value in the option. Then, For all matched elements of the DOM, iterate on all the different options, but one option at a time. So, for all the elements not treated, replay the prototype function. All the treatment should be in the same function, so I thought at recursion, but since I am not really experience with prototyping in javascript, I am not sure how to do that. For now, There is no error, but nothing happen even.

Is that correct ?

Thanks for your enlightenment.

(function($) {
    $.fn.foo = function (prop) {
        var options = $.extend({
            "elt" : "",   // Declaration of my options
            "callback" : function(){}
        }, prop)

        var optionsTab = options.elt.split('#');
        var current = optionsTab.slice(0,1),
        var remaining = optionsTab.slice(1);
        var result = this.each(function() {
            var el = $(this);
            // Code handling the first element in the option
        });

        if (remaining.length > 0) {
            $({ "elt": remaining.join("#") }); // Trial of recursion of foo
            return result;
        }
    }

*"`$({ "elt": remaining.join("#") }); // Trial of recursion of foo`"* I don't see any call to `foo` there. — T.J. Crowder, Nov 10 '13 at 11:47
If I try "foo({ "elt": remaining.join("#") });" => breaking on javascript runtime error, foo undefined :-/ — Elfentech, Nov 10 '13 at 11:54
@ user: That's because `foo` is undefined. `$("some selector").foo(...)` will be defined, though. But I'm not saying recursion is the right thing to do here. It's not at all clear to me what your actual end goal is, but I suspect recursion's not the right answer. — T.J. Crowder, Nov 10 '13 at 12:00
My goal is: For all the different element in the option passed in parameters, display the first parameter - wait n seconds - do the same with element remaining. — Elfentech, Nov 10 '13 at 12:14
What does *"For all the different element in the option passed in parameters, display the first parameter"* mean? Do you mean the DOM elements in the jQuery set? The option properties in the options object? What? The more effort you put into making your question clear, the more likely you are to get answers, and get them quickly. — T.J. Crowder, Nov 10 '13 at 12:25
Sorry, an example will make more Obvious. the call would be : $('div.showText').foo("elt" : "Hello!#Here is...#LastParam"); > So, I want to display "Hello!", wait n seconds, then display "Here is...", and so on - as text of all the div.showText. - The idea is to recursively iterate on the parameters to be display as text ("Hello!#Here is...#LastParam"). — Elfentech, Nov 10 '13 at 12:36
@HMR, no it doesn't (Object doesn't support property or method 'foo'). — Elfentech, Nov 10 '13 at 12:36
You failed to show us where you call foo recursively. I guess it's in the each loop so the `this` context changes. How would you prevent from calling foo indefinitely? You must have some sort of if statement that checks if foo needs to be called again. — HMR, Nov 10 '13 at 13:17
The each-loop will process the first string element. Then, I check if the remaining list of string is > 0 (if (remaining.length > 0) { -- In the code)). If so, "return result" (I forgot to paste the return after the if-block, though). — Elfentech, Nov 10 '13 at 13:21

score 0 · Accepted Answer · edited May 23 '17 at 10:31

I think you're trying to call recursively in a timeout am I correct?

    var result = this.each(function() {
        var el = $(this);
        // Code handling the first element in the option
    });

    if (remaining.length > 0) {
        $({ "elt": remaining.join("#") }); // Trial of recursion of foo
       var me = this;
       setTimeout(function(){
         me.foo(parameters);//not sure what the parameters should be
       },500);
    }
    return this;

Some helpful info: https://stackoverflow.com/a/16063711/1641941 (under "The this variable")

score 0 · Answer 2 · answered Nov 10 '13 at 13:34

Created this fiddle and it works:

$.fn.foo = function (prop) {
    var options = $.extend({
        "elt" : "",   // Declaration of my options
        "callback" : function(){}
    }, prop);

    var optionsTab = options.elt.split('#');
    var current = optionsTab.slice(0,1);
    var remaining = optionsTab.slice(1);
    this.each(function() {
        var el = $(this);
        // Code handling the first element in the option
    });

    if (remaining.length > 0) {
        this.foo({ "elt": remaining.join("#") }); // Trial of recursion of foo
    }
    return this;
};

Recursion with prototype function

2 Answers2