Saving a local data in a JQuery function

Question

I want to create two JQuery functions. One of which will use the data created in the other function. Say:

jQuery.fn.myScroller = function (child) {
    var $moveable = this.children(child);
    var $children = this.children(child).children();

    posl = posl.replace('px', '');
    post = post.replace('px', '');
    var varList = [];
    $children.each(function () {
        var currVar = {};
        currVar.w = $(this).width();
        varList.push(currVar);
    });
    // I want to save varList variable somehow.
    this.varList = varList; // (1)
};

jQuery.fn.scrollUnitLeft = function () {
    // Now I need to use this varList if this function called
    // But the following returns undefined.
    // However, I've saved it inside this at (1)
    console.log(this.varList)
// More code...
}


$('#main_div').myScroller("#dummydiv");
$('#main_div').scrollUnitLeft();

As I explained in comments in the code, this doesn't work.

How can I do this?

Answer 1

Creating a namespace or global variable as suggested doesn't look clean to me. You're already extending jQuery, so make it a jQuery variable:

jQuery.fn.varList = varList;

Edit: I don't really know the jQuery internals. If fn is meant to be for functions only, either put it into jQuery itself or write a getter

jQuery.fn.getVarList = function () {
    return varList;
}

Answer 2

You can create a namespace at the global scope:

window.yourNamespace = {};

and then put your varList variable in that namespace:

yourNamespace.varList = []; //Whatever you want here

This way the variable will be available to both of your functions (or any function for that matter).

Answer 3

Your understanding of this looks a little buggy to me (pardon me, you may be a lot more experienced than me)! this refers to the caller of the function. Both the times it is the div main_div . Try using a global variable which is declared outside both the functions or use data attribute on the div in the first function, and access that value in the second.

Answer 4

When you run your jQuery functions, this refers to the jQuery object instance used in each case.

In your code you create two jQuery object instances (one for every $(...) call), so the data is set in the first instance, and hence not available to the second instance.

If you were to run both your methods on the same jQuery object instance, they would work as expected.

jQuery.fn.mySet = function(){
  this.myVar = this.attr('id');
};

jQuery.fn.myGet = function(){
  console.log(this.myVar);
}

$('#a_div').mySet();
$('#a_div').myGet(); // outputs 'undefined'

var $other_div = $('#other_div');
$other_div.mySet();
$other_div.myGet(); // outputs 'other_div'

To achieve what you intend, you have to persist the data someplace other than the jQuery object instance. jQuery offers a way to do this via the .data() method. This method allows you to attach data to DOM elements. Check its documentation .

jQuery.fn.myRealSet = function(){
  this.data('myVar', this.attr('id'));
};

jQuery.fn.myRealGet = function(){
  console.log(this.data('myVar'));
}

$('#final_div').myRealSet();
$('#final_div').myRealGet(); // outputs 'final_div'

You can test this snippets here: http://jsfiddle.net/HPjYn/

EDIT: I cannot yet comment on other people's answers, but adding a jQuery prototype varable as suggested will make the data available from any jQuery object instance, which I don't think is what it's intended here.