Passing jquery selector to sub-function within a plugin

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

From stackoverflow

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

  Dan Drayne : Perfect! Do you know what can be done about the line.. $(selector+".page"+clickedLink).show(); (for the show functionality). selector+".page"+clickedLink.show(); doesn't work (which I imagine you know) Thanks!

• 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

  Dan Drayne : This isn't working - sorry to keep coming back but hopefully this could help someone searching for a similar problem in future - a test page is at http://allbutlost.com/test/simplepager/, have you got any other ideas? Dan

• It seems the missing link was

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

  Thanks for your invaluable help quark.