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

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

• javascript
• jquery
• function
• jquery-plugins

3 Answers 3

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

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

It seems the missing link was

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

Thanks for your invaluable help quark.