Question

I’m trying to make a quick jquery plugin (as a learning exercise) for making a simple pager from a list of items (LIs in this case) and have run into a problem when passing the current selector (this) to a sub-function. The code is below.

The problem is when creating the dynamic nav (the plugin requires jquery 1.3) and I need to pass the selector, as it is the sub-function that does the actual showing/hiding that make up the pager. I’m trying the following

var selector = $(this); 

To get the selector, then passing it to the sub-function at the bottom of the script as follows

$('.pageNav a').live('click', function(selector) { 

and hoping to use the selector within the subfunction as follows

$(selector).hide(); 

But i’m getting nothing. Any advice would be appreciated, no need to finish the plugin for me!

Thanks

(function($) { $.fn.quickPager = function() {      //edit this     var pageSize = 10;     //leave this     var selector = $(this);     var totalRecords = $(this).length;     var currentPage = 1;     var pageCounter = 1;      $(this).each(function(i){         if(i < pageCounter*pageSize && i >= (pageCounter-1)*pageSize) {             $(this).addClass('page'+pageCounter);         }         else {             $(this).addClass('page'+(pageCounter+1));             pageCounter ++;         }        });      //show/hide the appropriate regions      $(this).hide();     $('.page'+currentPage).show();      //first check if there is more than one page. If so, build nav     if(pageCounter > 1) {          //Build pager navigation         var pageNav = '<ul class='pageNav'>';            for (i=1;i<=pageCounter;i++){              if (i==1) {                 pageNav += '<li class=currentPage pageNav'+i+''><a rel=''+i+'' href='#'>Page '+i+'</a></li>';                }             else {                 pageNav += '<li class='pageNav'+i+''><a rel=''+i+'' href='#'>Page '+i+'</a></li>';             }          }         pageNav += '</ul>';         $('#pagerContainer').append(pageNav);          //pager navigation behaviour         $('.pageNav a').live('click', function(selector) {                       //grab the REL attribute              var clickedLink = $(this).attr('rel');             currentPage = clickedLink;             //remove current current (!) page             $('li.currentPage').removeClass('currentPage');             //Add current page highlighting             $(this).parent('li').addClass('currentPage');             //hide and show relevant links             //$('ul.paging li').text('TEST');             $(selector).hide();             $(selector+'.page'+clickedLink).show();             return false;         });      }    } })(jQuery); 

Answer 1

var selector = $(this); $('.pageNav a').live('click', function() {   // do something   selector.hide(); });