Passing jquery selector to sub-function within a plugin

Question

Hi There

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();
});

Answer 2

and change

$(selector+".page"+clickedLink).show();

to

selector.find(".page"+clickedLink).show();

selector is not a string it is a jQuery object which contains all elements that plugin understands as this

Answer 3

It seems the missing link was

selector.parent().find(".page"+clickedLink).show();

Thanks for your invaluable help quark.