Question

I would like to define variables within scope of paginate(). However, any variable defined with this (e.g. this.parentlist) is not available within the jQuery click method

var paginate = function(elt) {
          //would like to define variables within scope of paginate()
          //however, any variable defined with this (e.g. this.parentlist) is not available within the jQuery click method
          this.parentlist = elt.find('ul');
          var listitems = elt.find('li');
          this.listcount = this.list.find('li').size();
          var showitems = '3';

          this.numberofpages = ~~((this.count / this.show) + 1);

          this.parentlist.after('<ul class="links"></ul>');

          for(i=1;i<=this.numberofpages;i++) {
            $('.links').append('<li><a href="#'+i+'">'+i+'</a></li>')
          };

          //click a link
          $('.links a').click(function() {
            //this.parentlist is not available here
            listitems.hide();
            this.start = listitems.index() * showitems;
            this.end = (this.start + 1) * showitems;
            this.selected = listitems.slice(this.start,this.end).show().addClass('selected');
            console.log(this.selected);
            console.log(this.parentlist);
          }); 
  };

  paginate($('.pages'));

Answer 1

You use the var keyword to declare a variable within the current scope.

//For example:
var paginate = function(){

    // create a local variable (local to "paginate function")
    var myvar = 7;

    // create the click handler
    $('.links a').click(function() {

        // access the local variable
        alert(myvar);

    });
}

The myvar variable is available “within” the click handler anonymous function because they were both declared “within” the same scope (the paginate function).

However, once you’re inside the anonymous function, this refers to the calling object of that function and not the function that it was declared in. If you need access to this as the “paginate” caller, then you can cache the this variable like others are saying: var that = this; <– this is declaring a local variable (like above) and setting its value to this.

So, in your example, you can change it like this:

var paginate = function(elt) {

      var parentlist = elt.find('ul');
      var listitems = elt.find('li');
      var listcount = this.list.find('li').size();
      var showitems = '3';

      var numberofpages = ~~((this.count / this.show) + 1);

      parentlist.after('<ul class="links"></ul>');

      for(i=1;i<=numberofpages;i++) {
        $('.links').append('<li><a href="#'+i+'">'+i+'</a></li>')
      };

      //click a link
      $('.links a').click(function() {
        //this.parentlist is not available here
        listitems.hide();
        this.start = listitems.index() * showitems;
        this.end = (this.start + 1) * showitems;
        this.selected = listitems.slice(this.start,this.end).show().addClass('selected');
        console.log(this.selected);
        console.log(parentlist);
      }); 
};

paginate($('.pages'));